---
import type { HTMLAttributes, HTMLTag } from 'astro/types'
import '../../dist/components/Text/styles.css'

type TextVariant =
  | 'display-large'
  | 'display-medium'
  | 'display-small'
  | 'heading-big'
  | 'heading-large'
  | 'heading-medium'
  | 'heading-small'
  | 'heading-minimum'
  | 'heading-micro'
  | 'heading-nano'
  | 'body-big'
  | 'body-large'
  | 'body-medium'
  | 'body-small'
  | 'caption'

type TextWeight = 'bold' | 'semibold' | 'medium' | 'regular' | 'light'

type TextColor = 'common' | 'secondary' | 'white'

export type Props = Omit<HTMLAttributes<'p'>, 'color'> & {
  as?: HTMLTag
  color?: TextColor
  variant?: TextVariant
  variantDesk?: TextVariant
  weight?: TextWeight
  /** Raw HTML string — the Astro counterpart of `dangerouslySetInnerHTML`. */
  html?: string
  /** Anchor attributes, for `as="a"`. */
  href?: string
  target?: string
  rel?: string
}

const {
  as = 'p',
  color = 'common',
  variant = 'body-medium',
  variantDesk,
  weight = 'regular',
  html,
  class: className,
  // Astro passes `class:list` on a component through as a raw prop; without
  // picking it up here it would land in `...rest` and overwrite the classes
  // this component builds.
  'class:list': classList,
  ...rest
} = Astro.props

const Tag = as
const classes = [
  'au-text',
  `au-text--${variant}`,
  variantDesk && `au-text--desk-${variantDesk}`,
  `au-text--color-${color}`,
  `au-text--weight-${weight}`,
  className,
  classList,
]
---

{
  html ? (
    <Tag class:list={classes} set:html={html} {...rest} />
  ) : (
    <Tag class:list={classes} {...rest}>
      <slot />
    </Tag>
  )
}