type Props = {
  children: React.ReactNode
  className?: string
  tone?: 'lavender' | 'deep' | 'outline'
}

export function Badge({ children, className = '', tone = 'lavender' }: Props) {
  const tones = {
    lavender: 'bg-purple-lavender text-purple-deep',
    deep: 'bg-purple-deep text-white',
    outline: 'border border-purple-deep text-purple-deep',
  }
  return (
    <span
      className={`inline-flex items-center font-mono text-[11px] tracking-widest uppercase rounded-full px-3 py-1 ${tones[tone]} ${className}`}
    >
      {children}
    </span>
  )
}