---
interface Props {
  as?: "h1" | "h2" | "h3";
}

const { as: Tag = "h1" } = Astro.props;
---

<Tag class:list={["heading", `heading-${Tag}`]}>
  <slot />
</Tag>

<style>
  .heading {
    font-family: var(--font-heading);
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .heading-h1 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
  }

  .heading-h2 {
    font-size: 1.375rem;
    font-weight: 600;
    margin-top: var(--space-xl);
    margin-bottom: var(--space-sm);
  }

  .heading-h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
  }
</style>