---
/**
 * A section heading: optional gold eyebrow over a tick scale, the heading in
 * Cinzel, and the filament underline beneath it.
 */
import Kicker from "./Kicker.astro";

interface Props {
  eyebrow?: string;
  level?: 1 | 2 | 3;
  id?: string;
  class?: string;
}
const { eyebrow, level = 2, id, class: className } = Astro.props;
const H = `h${level}` as "h1" | "h2" | "h3";
---
<div class:list={["gk-heading", className]}>
  {eyebrow && <Kicker>{eyebrow}</Kicker>}
  <H id={id}><slot /></H>
  <span class="gk-underline" aria-hidden="true"></span>
</div>

<style>
  .gk-heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .gk-heading :is(h1, h2, h3) {
    margin: 0;
  }
  .gk-underline {
    display: block;
    width: 180px;
    max-width: 60%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--gk-gold), rgba(var(--gk-gold-rgb), 0.15) 70%, transparent);
    box-shadow: 0 0 8px rgba(var(--gk-gold-rgb), 0.35);
  }
</style>