import { Button } from "@/components/ui/button";
import { Link } from "@tanstack/react-router";
import { ArrowLeft, Search } from "lucide-react";

export default function NotFound() {
  return (
    <div className="flex flex-col items-center justify-center min-h-[70vh] px-4 text-center">
      <div className="space-y-6 max-w-md mx-auto">
        <div className="relative mx-auto w-40 h-40 md:w-52 md:h-52">
          <div className="absolute inset-0 bg-primary/10 rounded-full animate-pulse" />
          <div className="absolute inset-0 flex items-center justify-center">
            <Search className="h-20 w-20 md:h-24 md:w-24 text-primary" strokeWidth={1.5} />
          </div>
        </div>

        <div className="space-y-3">
          <h1 className="text-4xl md:text-5xl font-bold tracking-tighter">404</h1>
          <h2 className="text-2xl md:text-3xl font-semibold">Không tìm thấy</h2>
          <p className="text-muted-foreground">
            Trang bạn yêu cầu truy cập không tồn tại hoặc đã bị xoá.
          </p>
        </div>

        <div className="pt-6">
          <Button asChild size="lg" className="gap-2">
            <Link to="/dashboard" className="flex items-center gap-1">
              <ArrowLeft className="h-4 w-4" />
              Trở về trang chủ
            </Link>
          </Button>
        </div>
      </div>
    </div>
  );
}