---
/**
 * SectionHeader.astro
 * ---------------------------------------------------------------------------
 * Reusable section title block: a mono "kicker" (e.g. "02"), an h2 heading, and
 * an optional supporting line. Keeps section openers visually consistent.
 *
 * `tone` controls contrast:
 *   - "default" for headers on lighter CONTENT surfaces (uses --color-text /
 *     --color-text-muted, which are tuned for the page body).
 *   - "hero" for headers that sit on a dark hero / starfield background: forces
 *     near-white title + bright subtitle + a glowing kicker so the text stands
 *     out against the deep Milky Way field.
 */
import Icon from "@components/Icon.astro";

interface Props {
  /** Monospace kicker, e.g. "02" or "Experience". */
  kicker?: string;
  title: string;
  /** Optional subtitle shown under the title. */
  subtitle?: string;
  /** Optional mdi icon shown beside the kicker. */
  icon?: string;
  class?: string;
  align?: "left" | "center";
  /** "hero" = bright text for dark backgrounds; "default" = body content. */
  tone?: "default" | "hero";
}

const {
  kicker,
  title,
  subtitle,
  icon,
  class: className = "",
  align = "left",
  tone = "default",
} = Astro.props;

const isHero = tone === "hero";
const titleColor = isHero ? "var(--color-cream)" : undefined;
const subtitleColor = isHero ? "var(--color-cream)" : "var(--color-text-muted)";
---

<div
  class:list={[
    "flex flex-col gap-3",
    align === "center" && "items-center text-center",
    className,
  ]}
>
  {
    kicker && (
      <span
        class="inline-flex items-center gap-2 font-mono text-xs uppercase tracking-[0.22em]"
        style={
          isHero
            ? "color: var(--color-accent); text-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 45%, transparent);"
            : "color: var(--color-accent);"
        }
      >
        {icon && <Icon name={icon} class="h-4 w-4" />}
        {kicker}
      </span>
    )
  }
  <h2 style={titleColor ? `color: ${titleColor};` : undefined}>{title}</h2>
  {
    subtitle && (
      <p
        class="max-w-2xl text-base sm:text-lg"
        style={`color: ${subtitleColor};${isHero ? " opacity: 0.92;" : ""}`}
      >
        {subtitle}
      </p>
    )
  }
</div>