---
/**
 * StarBurst.astro
 * ---------------------------------------------------------------------------
 * A small decorative four-point "sparkle" star (alchemical/star-chart style),
 * drawn as inline SVG so it inherits `currentColor`. Used as an accent mark
 * next to headings, in dividers, and as corner flourishes on frames.
 *
 * Variants:
 *   - `solid`  : filled sparkle (default)
 *   - `outline`: stroke-only, lighter
 *
 * Usage:
 *   <StarBurst class="h-4 w-4" style="color: var(--color-gold)" />
 *   <StarBurst variant="outline" class="h-6 w-6" />
 */
interface Props {
  variant?: 'solid' | 'outline';
  class?: string;
  style?: string;
}
const { variant = 'solid', class: className = '', style = '' } = Astro.props;
const fill = variant === 'outline' ? 'none' : 'currentColor';
const sw = variant === 'outline' ? 1.4 : 0;
---
<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  class={className}
  style={style}
  fill={fill}
  stroke="currentColor"
  stroke-width={sw}
  stroke-linejoin="round"
  aria-hidden="true"
>
  {/* Four-point sparkle: two perpendicular sharp diamonds + small inner core. */}
  <path d="M12 1c.6 4.7 2.3 8.4 7 9-4.7.6-8.4 2.3-9 7-.6-4.7-2.3-8.4-7-9 4.7-.6 8.4-2.3 9-7z" />
</svg>