Text

<Text variant="label" as="span">Category</Text>

import type * as React from 'react'
import { cn } from '@/lib/utils'

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

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

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

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