import { useNavigate } from 'react-router-dom';
import { Button } from '@/components/ui/Button';
import { PageHeader } from '@/components/ui/PageHeader';
import { TicketsWidget } from '@/components/widgets/TicketsWidget';

export default function ServiceDesk() {
  const navigate = useNavigate();

  return (
    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">

        {/* HEADER EXTRAIT */}
        <PageHeader 
          title="Centre de Support (Service Desk)"
          description="Canal de communication sécurisé avec vos experts GISE."
        >
          <Button onClick={() => navigate('/support/new')}>
            Ouvrir un ticket sécurisé
          </Button>
        </PageHeader>

        {/* WIDGET DES TICKETS */}
        <TicketsWidget 
          onSelectTicket={(ticketId) => navigate(`/support/tickets/${ticketId}`)} 
        />

      </main>
    </div>
  );
}