---
interface Props {
    as?: keyof HTMLElementTagNameMap;
    class?: string;
    size?: 'card' | 'display' | 'page' | 'section';
}

const { as = 'h2', class: className = '', size = 'section' } = Astro.props;
const Tag = as;
const sizeClasses = {
    display:
        'font-[var(--font-display)] text-[length:var(--type-display-size)] leading-[var(--line-display)] tracking-[var(--tracking-display)]',
    page: 'font-[var(--font-display)] text-[length:var(--type-page-size)] leading-[var(--line-heading)] tracking-[var(--tracking-tight)]',
    section:
        'font-[var(--font-display)] text-[length:var(--type-section-size)] leading-[var(--line-heading)] tracking-[var(--tracking-tight)]',
    card: 'font-semibold text-[length:var(--type-card-size)] leading-[1.12] tracking-[var(--tracking-tight)]',
};
---

<Tag class:list={['m-0 text-[var(--color-ink-900)]', sizeClasses[size], className]}>
    <slot />
</Tag>