---
type TypographyVariant =
  | 'main-title'
  | 'main-subtitle'
  | 'section-title'
  | 'section-subtitle'
  | 'item-title'
  | 'item-title-suffix'
  | 'item-subtitle'
  | 'tile-title'
  | 'tile-subtitle'
  | 'paragraph';

const variantToElement = {
  'main-title': 'h1',
  'main-subtitle': 'h2',
  'section-title': 'h2',
  'section-subtitle': 'h3',
  'item-title': 'h3',
  'item-title-suffix': 'span',
  'item-subtitle': 'p',
  'tile-title': 'h4',
  'tile-subtitle': 'p',
  paragraph: 'p',
} as const;

const variantToClassName = {
  'main-title': 'text-4xl font-extrabold text-gray-900',
  'main-subtitle': 'text-lg font-medium text-gray-700',
  'section-title': 'text-3xl font-extrabold text-gray-900',
  'section-subtitle': 'text-lg font-extrabold text-gray-900',
  'item-title': 'text-xl font-extrabold text-gray-900',
  'item-title-suffix': 'text-xl font-medium text-gray-700',
  'item-subtitle': 'text-md font-medium text-gray-700',
  'tile-title': 'text-sm font-medium text-gray-700',
  'tile-subtitle': 'text-sm font-normal text-gray-500',
  paragraph: 'text-base leading-relaxed font-normal text-gray-500',
};

export interface Props extends Omit<astroHTML.JSX.HTMLAttributes, 'slot'> {
  variant?: TypographyVariant;
}

const { variant = 'paragraph', ...props } = Astro.props;
const Element = variantToElement[variant];
---

<Element {...props} class:list={[variantToClassName[variant], props.class]}><slot /></Element>
