/**
 * Requests List Component with Loading and Empty States
 */

import { Card, CardContent } from '@/components/ui/card';
import { FileText } from 'lucide-react';
import { RequestCard } from './RequestCard';
import type { ConvertedRequest } from '../types/requests.types';

interface RequestsListProps {
  requests: ConvertedRequest[];
  loading: boolean;
  hasActiveFilters: boolean;
  onViewRequest: (requestId: string, requestTitle?: string, status?: string) => void;
}

export function RequestsList({
  requests,
  loading,
  hasActiveFilters,
  onViewRequest
}: RequestsListProps) {
  if (loading) {
    return (
      <Card data-testid="loading-state">
        <CardContent className="p-6 text-sm text-gray-600">Loading requests…</CardContent>
      </Card>
    );
  }

  if (requests.length === 0) {
    return (
      <Card data-testid="empty-state">
        <CardContent className="p-12 text-center">
          <FileText className="w-12 h-12 text-gray-400 mx-auto mb-4" />
          <h3 className="text-lg font-medium text-gray-900 mb-2">No requests found</h3>
          <p className="text-gray-600">
            {hasActiveFilters
              ? 'Try adjusting your search or filters'
              : 'No requests match the current criteria'}
          </p>
        </CardContent>
      </Card>
    );
  }

  return (
    <div className="space-y-4" data-testid="requests-list">
      {requests.map((request, index) => (
        <RequestCard
          key={request.id}
          request={request}
          index={index}
          onViewRequest={onViewRequest}
        />
      ))}
    </div>
  );
}

