import React from 'react';
import { useTickets } from '@/hooks/useTickets';
import { TicketRow } from '@/components/ui/TicketRow';
import { Card, CardContent } from '@/components/ui/Card';
import { Loader } from '@/components/ui/Loader';
import { EmptyState } from '@/components/ui/EmptyState';

interface TicketsWidgetProps {
  onSelectTicket: (id: string) => void;
}

export const TicketsWidget: React.FC<TicketsWidgetProps> = ({ onSelectTicket }) => {
  const { tickets, isLoading, error } = useTickets();

  return (
    <Card className='pb-7'>
      <CardContent className="p-0">
        {/* En-tête du Widget */}
        <div className="p-6 border-b border-slate-100">
          <h2 className="text-lg font-semibold text-slate-900">Requêtes en cours et historiques</h2>
        </div>

        {/* Liste des tickets et états de chargement */}
        <div className="divide-y divide-slate-100">
          {error && (
            <div className="p-6">
              <EmptyState message={error} className="text-red-500 font-medium not-italic" />
            </div>
          )}
          
          {isLoading && !error && (
            <Loader />
          )}
          
          {!isLoading && !error && tickets.length === 0 && (
            <div className="p-6">
              <EmptyState message="Aucun ticket enregistré pour le moment." />
            </div>
          )}
          
          {!isLoading && !error && tickets.map((ticket) => (
            <TicketRow 
              key={ticket.id} 
              ticket={ticket} 
              onClick={onSelectTicket} 
            />
          ))}
        </div>
      </CardContent>
    </Card>
  );
};

export default TicketsWidget;