'use client';

interface FilterChipProps {
  label: string;
  onRemove: () => void;
}

export function FilterChip({ label, onRemove }: FilterChipProps) {
  return (
    <span className="inline-flex items-center gap-1 rounded-full bg-primary-50 px-3 py-1 text-xs font-medium text-primary-700 border border-primary-200">
      {label}
      <button
        type="button"
        onClick={onRemove}
        className="ml-1 rounded-full hover:bg-primary-100 p-0.5 transition-colors"
        aria-label={`Remove ${label} filter`}
      >
        <svg
          className="h-3 w-3"
          viewBox="0 0 12 12"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          aria-hidden="true"
        >
          <path strokeLinecap="round" d="M3 3l6 6M9 3l-6 6" />
        </svg>
      </button>
    </span>
  );
}