/**
 * My Requests List Section Component
 */

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

interface MyRequestsListProps {
  requests: MyRequest[];
  loading: boolean;
  searchTerm: string;
  statusFilter: string;
  priorityFilter: string;
  onViewRequest: (requestId: string, requestTitle?: string, status?: string) => void;
}

export function MyRequestsList({
  requests,
  loading,
  searchTerm,
  statusFilter,
  priorityFilter,
  onViewRequest,
}: MyRequestsListProps) {
  if (loading) {
    return (
      <Card data-testid="loading-state">
        <CardContent className="p-6 text-sm text-gray-600">Loading your requests…</CardContent>
      </Card>
    );
  }

  if (requests.length === 0) {
    const hasActiveFilters = searchTerm || statusFilter !== 'all' || priorityFilter !== 'all';
    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' : "You haven't created any requests yet"}
          </p>
        </CardContent>
      </Card>
    );
  }

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

