Badge

<Badge variant="turquoise">New arrival</Badge>

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

type BadgeVariant = 'coral' | 'turquoise' | 'yellow' | 'green' | 'pink'

interface BadgeProps {
  children:   React.ReactNode
  variant?:   BadgeVariant
  className?: string
}

const VARIANT_CLASS: Record<BadgeVariant, string> = {
  coral:     'badge--coral',
  turquoise: 'badge--turquoise',
  yellow:    'badge--yellow',
  green:     'badge--green',
  pink:      'badge--pink',
}

export function Badge({
  children,
  variant   = 'coral',
  className,
}: BadgeProps): React.JSX.Element {
  return (
    <span className={cn('badge', VARIANT_CLASS[variant], className)}>
      {children}
    </span>
  )
}