import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Home, RefreshCw, AlertTriangle } from 'lucide-react';

function ServerErrorPage() {
  const handleRefresh = () => {
    window.location.reload();
  };

  return (
    <div className='min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900 p-4'>
      <Card className='w-full max-w-md text-center'>
        <CardHeader>
          <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-red-100 dark:bg-red-900'>
            <AlertTriangle className='h-8 w-8 text-red-600 dark:text-red-400' />
          </div>
          <CardTitle className='text-2xl'>Erreur serveur</CardTitle>
          <CardDescription>
            Une erreur interne s'est produite. Notre équipe a été notifiée.
          </CardDescription>
        </CardHeader>
        <CardContent className='space-y-4'>
          <div className='text-6xl font-bold text-gray-300 dark:text-gray-700'>
            500
          </div>
          <p className='text-gray-600 dark:text-gray-400'>
            Nous nous excusons pour la gêne occasionnée. Veuillez réessayer dans
            quelques instants.
          </p>
          <div className='flex flex-col sm:flex-row gap-2'>
            <Button onClick={handleRefresh} className='flex-1'>
              <RefreshCw className='mr-2 h-4 w-4' />
              Réessayer
            </Button>
            <Button asChild variant='outline' className='flex-1'>
              <Link to='/'>
                <Home className='mr-2 h-4 w-4' />
                Retour à l'accueil
              </Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
export default ServerErrorPage;
