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 = 'gray',
}) => {
  return (
    <div
      className={cn(
        'inline-flex items-center px-1.5 rounded-full text-xs mr-2 bg-gray-100 text-gray-500',
        `bg-${color}-100 text-${color}-500`,
        className,
      )}
    >
      {label && <span className="font-medium">{label} :</span>}
      <span>{value}</span>
    </div>
  );
};

export default Chip;