Text

<Text variant="caption" as="span">Serves 2, 90 min</Text>

import { cn } from '@/lib/utils'

type TextVariant = 'body' | 'caption' | 'label' | 'code'
type TextAs      = 'p' | 'span' | 'div'

interface TextProps {
  variant?:   TextVariant
  as?:        TextAs
  className?: string
  children:   React.ReactNode
}

const VARIANT_CLASSES: Record<TextVariant, string> = {
  body:    'feast-text-body',
  caption: 'feast-text-caption',
  label:   'feast-text-label',
  code:    'feast-text-code',
}

export function Text({
  variant   = 'body',
  as:       As = 'p',
  className,
  children,
}: TextProps): React.JSX.Element {
  return (
    <As className={cn(VARIANT_CLASSES[variant], className)}>
      {children}
    </As>
  )
}