export type Type =
  | 'page'
  | 'section'
  | 'heading'
  | 'subheading'
  | 'paragraph'
  | 'label'
  | 'detail'
  | 'hint'
  | 'link'

export type Color =
  | 'primary'
  | 'secondary'
  | 'success'
  | 'info'
  | 'warning'
  | 'error'
  | 'neutral'
  | 'muted'
  | 'none'

export function useTypography(props: {
  class?: string
  ux?: string
  type: Type
  color?: Color
  margin?: boolean
}) {
  return useStyling(
    'typography',
    {
      slots: {
        base: '',
      },
      variants: {
        type: {
          page: { base: 'text-4xl font-bold tracking-tight leading-tight' },
          section: { base: 'text-3xl font-semibold tracking-tight leading-snug' },
          heading: { base: 'text-2xl font-semibold leading-snug' },
          subheading: { base: 'text-xl font-medium leading-snug' },
          paragraph: { base: 'text-lg leading-relaxed' },
          label: { base: 'text-lg font-bold leading-none' },
          detail: { base: 'text-base leading-snug' },
          hint: { base: 'text-base leading-snug' },
          link: { base: 'text-base leading-snug' },
        },
        color: {
          primary: { base: 'text-primary-600' },
          secondary: { base: 'text-secondary-600' },
          success: { base: 'text-success-600' },
          info: { base: 'text-info-600' },
          warning: { base: 'text-warning-700' },
          error: { base: 'text-error-600' },
          neutral: { base: 'text-neutral-800' },
          muted: { base: 'text-neutral-500' },
          none: {},
        },
        margin: {
          true: {},
          false: {},
        },
      },
      compoundVariants: [
        {
          type: 'page',
          margin: true,
          class: { base: 'mb-4' },
        },
        {
          type: 'section',
          margin: true,
          class: { base: 'mb-4' },
        },
        {
          type: 'heading',
          margin: true,
          class: { base: 'mb-3' },
        },
        {
          type: 'subheading',
          margin: true,
          class: { base: 'mb-2' },
        },
        {
          type: 'paragraph',
          margin: true,
          class: { base: 'mb-4' },
        },
        {
          type: 'label',
          margin: true,
          class: { base: 'mb-2' },
        },
      ],
      defaultVariants: {
        color: props.type === 'link' ? 'none' : 'neutral',
        margin: true,
      },
    },
    props
  )
}