interface Props {
  children: React.ReactNode
  active?: boolean
  onClick?: () => void
}

export function Badge({ children, active, onClick }: Props) {
  return (
    <span
      onClick={onClick}
      className={`inline-block px-3 py-1 rounded-full text-sm sm:text-base font-medium cursor-pointer transition-colors whitespace-nowrap ${
        active
          ? 'bg-primary text-white'
          : 'bg-primary-light text-primary'
      }`}
    >
      {children}
    </span>
  )
}
