export interface ChipWithIconProps {
  label: string;
  onDelete: () => void;
  iconUrl: string;
}

export const ChipWithIcon = ({
  label,
  onDelete,
  iconUrl,
}: ChipWithIconProps) => {
  return (
    <span className="inline-flex items-center px-3 py-1 rounded-full bg-slate-200 text-sm font-medium text-white">
      {iconUrl && (
        <img src={iconUrl} alt="icon" className="w-4 h-4 rounded-full mr-2" />
      )}
      {label}
      <button
        className="ml-2 text-white hover:text-gray-200 focus:outline-none"
        onClick={onDelete}
      >
        x
      </button>
    </span>
  );
};