import { CheckCircle, LucideIcon } from 'lucide-react';
import type { EntityFilter, StatusFilter } from '@/types/moderation';

interface EmptyQueueStateProps {
  entityFilter: EntityFilter;
  statusFilter: StatusFilter;
  icon?: LucideIcon;
  title?: string;
  customMessage?: string;
}

const getEmptyStateMessage = (entityFilter: EntityFilter, statusFilter: StatusFilter): string => {
  const entityLabel = entityFilter === 'all' ? 'items' : 
                     entityFilter === 'reviews' ? 'reviews' :
                     entityFilter === 'photos' ? 'photos' : 'submissions';
  
  switch (statusFilter) {
    case 'pending':
      return `No pending ${entityLabel} require moderation at this time.`;
    case 'partially_approved':
      return `No partially approved ${entityLabel} found.`;
    case 'flagged':
      return `No flagged ${entityLabel} found.`;
    case 'approved':
      return `No approved ${entityLabel} found.`;
    case 'rejected':
      return `No rejected ${entityLabel} found.`;
    case 'all':
      return `No ${entityLabel} found.`;
    default:
      return `No ${entityLabel} found for the selected filter.`;
  }
};

export const EmptyQueueState = ({ 
  entityFilter, 
  statusFilter, 
  icon: Icon = CheckCircle,
  title = 'No items found',
  customMessage
}: EmptyQueueStateProps) => {
  const message = customMessage || getEmptyStateMessage(entityFilter, statusFilter);

  return (
    <div className="text-center py-8">
      <Icon className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
      <h3 className="text-lg font-semibold mb-2">{title}</h3>
      <p className="text-muted-foreground">{message}</p>
    </div>
  );
};

EmptyQueueState.displayName = 'EmptyQueueState';