Badge

<Badge variant="green">Active</Badge>

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

interface BadgeProps {
  children: React.ReactNode
  variant?: 'ice' | 'green' | 'amber' | 'red' | 'violet' | 'surface'
  className?: string
}

const variantClass: Record<NonNullable<BadgeProps['variant']>, string> = {
  ice: 'mdn-badge mdn-badge-ice',
  green: 'mdn-badge mdn-badge-green',
  amber: 'mdn-badge mdn-badge-amber',
  red: 'mdn-badge mdn-badge-red',
  violet: 'mdn-badge mdn-badge-violet',
  surface: 'mdn-badge mdn-badge-surface',
}

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