'use client';

interface FilterTagListProps {
  filters: string[];
  formatTag: (filter: string) => string;
  onRemove: (filter: string) => void;
  onClearAll: () => void;
  clearAllText?: string;
}

export function FilterTagList({ 
  filters, 
  formatTag, 
  onRemove, 
  onClearAll,
  clearAllText = "Očisti sve"
}: FilterTagListProps) {
  if (!filters || filters.length === 0) {
    return null;
  }

  return (
    <div className="flex flex-wrap gap-2">
      {filters.map((filter) => (
        <div 
          key={filter} 
          className="bg-gray-100 text-sm py-1 px-3 rounded-full flex items-center"
        >
          <span>{formatTag(filter)}</span>
          <button 
            onClick={() => onRemove(filter)}
            className="ml-2 text-gray-500 hover:text-gray-700"
          >
            <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
              <path 
                fillRule="evenodd" 
                d="M10 8.586l3.293-3.293a1 1 0 111.414 1.414L11.414 10l3.293 3.293a1 1 0 01-1.414 1.414L10 11.414l-3.293 3.293a1 1 0 01-1.414-1.414L8.586 10 5.293 6.707a1 1 0 011.414-1.414L10 8.586z" 
                clipRule="evenodd" 
              />
            </svg>
          </button>
        </div>
      ))}
      <button
        onClick={onClearAll}
        className="text-primary text-sm font-medium hover:underline"
      >
        {clearAllText}
      </button>
    </div>
  );
} 