import React from 'react'
import clsx from 'clsx'

interface TagProps {
  children: React.ReactNode
  color?: 'blue' | 'green' | 'yellow'
  className?: string
}

const colorMap: Record<NonNullable<TagProps['color']>, string> = {
  blue: 'bg-blue-100 text-blue-700 border-blue-200',
  green: 'bg-green-100 text-green-700 border-green-200',
  yellow: 'bg-yellow-100 text-yellow-700 border-yellow-200',
}

export const Tag: React.FC<TagProps> = ({ children, color = 'yellow', className }) => (
  <span className={clsx('badge badge-md rounded-none font-medium px-3 py-2', colorMap[color], className)}>
    {children}
  </span>
)