import { useNavigate } from 'react-router';
import { ArrowLeft, Home } from 'lucide-react';
import { Button } from '@/client/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/client/components/ui/card';

export const NotFoundPage = () => {
  const navigate = useNavigate();
  
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4">
      <Card className="w-full max-w-md border-0 shadow-xl">
        <CardHeader className="text-center">
          <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-primary/10 mb-4">
            <span className="text-4xl font-bold text-primary">404</span>
          </div>
          <CardTitle className="text-2xl">页面未找到</CardTitle>
          <CardDescription>
            抱歉，您访问的页面不存在或已被移除
          </CardDescription>
        </CardHeader>
        
        <CardContent className="text-center">
          <p className="text-muted-foreground">
            请检查URL是否正确，或尝试以下操作：
          </p>
        </CardContent>
        
        <CardFooter className="flex gap-2">
          <Button
            onClick={() => navigate(-1)}
            variant="outline"
            className="flex-1"
          >
            <ArrowLeft className="h-4 w-4 mr-2" />
            返回上一页
          </Button>
          <Button
            onClick={() => navigate('/')}
            className="flex-1"
          >
            <Home className="h-4 w-4 mr-2" />
            返回首页
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
};