components/ui/Chip.tsx

import { cn } from '@/lib/utils';

export interface ChipProps {
  label?: string;
  value: string;
  color?: 'gray' | 'blue' | 'yellow' | 'purple';
  className?: string;
}

const Chip: React.FC<ChipProps> = ({ label, value, className, color }) => {
  return (
    <div
      className={cn(
        `inline-flex items-center px-1.5 rounded-full text-xs bg-gray-100 text-gray-500 mr-2`,
        color === 'blue' && 'bg-blue-100 text-blue-500',
        color === 'yellow' && 'bg-yellow-100 text-yellow-500',
        color === 'purple' && 'bg-purple-100 text-purple-500',
        className,
      )}
    >
      {label && <span className="font-medium">{label} :</span>}
      <span>{value}</span>
    </div>
  );
};

export default Chip;