import { Filter, MessageSquare, FileText, Image } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import type { EntityFilter, StatusFilter } from '@/types/moderation';

interface ActiveFiltersDisplayProps {
  entityFilter: EntityFilter;
  statusFilter: StatusFilter;
  defaultEntityFilter?: EntityFilter;
  defaultStatusFilter?: StatusFilter;
}

const getEntityFilterIcon = (filter: EntityFilter) => {
  switch (filter) {
    case 'reviews': return <MessageSquare className="w-4 h-4" />;
    case 'submissions': return <FileText className="w-4 h-4" />;
    case 'photos': return <Image className="w-4 h-4" />;
    default: return <Filter className="w-4 h-4" />;
  }
};

// Removed - sorting functionality deleted

export const ActiveFiltersDisplay = ({ 
  entityFilter, 
  statusFilter,
  defaultEntityFilter = 'all',
  defaultStatusFilter = 'pending'
}: ActiveFiltersDisplayProps) => {
  const hasActiveFilters = 
    entityFilter !== defaultEntityFilter || 
    statusFilter !== defaultStatusFilter;

  if (!hasActiveFilters) return null;

  return (
    <div className="flex items-center gap-2 text-sm text-muted-foreground">
      <span>Active filters:</span>
      {entityFilter !== defaultEntityFilter && (
        <Badge variant="secondary" className="flex items-center gap-1">
          {getEntityFilterIcon(entityFilter)}
          {entityFilter}
        </Badge>
      )}
      {statusFilter !== defaultStatusFilter && (
        <Badge variant="secondary" className="capitalize">
          {statusFilter}
        </Badge>
      )}
    </div>
  );
};
