import { useNavigate } from 'react-router-dom';
import { useContracts } from '@/hooks/useContracts';
import { ServiceObject } from '@/components/ui/ServiceObject';
import { Card, CardContent } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Loader } from '@/components/ui/Loader';
import { EmptyState } from '@/components/ui/EmptyState';

export default function ServicesWidget() {
  const { contracts, isLoading, error } = useContracts();
  const navigate = useNavigate();

  return (
    <Card>
      <CardContent className="p-6 flex flex-col h-full">
        
        <div className="mb-4">
          <h2 className="text-lg font-semibold text-slate-900">Vos services gérés</h2>
          <p className="text-sm text-slate-500">Catalogue des contrats d'infogérance actifs</p>
        </div>

        <div className="flex-1 overflow-y-auto mb-6 space-y-3">
          {error && <EmptyState message={error} className="text-red-500" />}
          {isLoading && !error && <Loader />}
          {!isLoading && !error && contracts.length === 0 && (
            <EmptyState message="Aucun contrat actif détecté." />
          )}
          {!isLoading && !error && contracts.map((contract) => (
            <ServiceObject key={contract.id} contract={contract} />
          ))}
        </div>

        <Button size="lg" onClick={() => navigate('/evolution-infrastructure')}>
          Demander une évolution du parc
        </Button>

      </CardContent>
    </Card>
  );
}