'use client'

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

export default function Pill({ active, onClick, children }: PillProps) {
  return (
    <button
      onClick={onClick}
      className={
        `rounded-full px-3 py-1 text-xs transition-colors ` +
        (active
          ? 'bg-[#141414] text-white border border-[#222222]'
          : 'text-[#555555] border border-[#141414] hover:text-white')
      }
    >
      {children}
    </button>
  )
}