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

export function PropertyPill({
  icon,
  label,
  value,
  empty,
  onClick,
}: {
  icon: React.ReactNode;
  label: string;
  value?: React.ReactNode;
  empty?: boolean;
  onClick?: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      className={cn(
        'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-xs transition-colors',
        empty
          ? 'border border-dashed border-border text-muted-foreground hover:text-foreground hover:border-foreground/50'
          : 'border border-border/60 bg-background/60 text-foreground hover:border-ring/40',
      )}
    >
      <span className="flex items-center">{icon}</span>
      {empty ? (
        <span>{label}</span>
      ) : (
        <>
          <span className="text-muted-foreground">{label}:</span>
          <span>{value}</span>
        </>
      )}
    </button>
  );
}
