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

export default function ErrorRoute({ error }: { error: string }) {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen px-4 text-center">
      <div className="bg-destructive/10 rounded-full p-6 mb-6">
        <AlertTriangle className="h-12 w-12 text-destructive" />
      </div>

      <h1 className="text-4xl font-bold mb-4">Lỗi</h1>
      <p className="text-muted-foreground mb-8 max-w-md">
        Đã xảy ra lỗi: <strong>{error}</strong>
      </p>

      <div className="flex flex-col sm:flex-row gap-4">
        <Button asChild variant="outline">
          <Link to="/dashboard">Về trang chủ</Link>
        </Button>
      </div>
    </div>
  );
}