import { createFileRoute, Link } from "@tanstack/react-router";
import { Header } from "@/components/site/Header";
import { Footer } from "@/components/site/Footer";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CheckCircle2 } from "lucide-react";

export const Route = createFileRoute("/order-success/$orderId")({ component: SuccessPage });

function SuccessPage() {
  const { orderId } = Route.useParams();
  return (
    <div className="min-h-screen flex flex-col bg-background">
      <Header />
      <main className="flex-1 flex items-center justify-center py-16 px-4">
        <Card className="max-w-md w-full p-8 rounded-2xl text-center">
          <div className="mx-auto w-16 h-16 rounded-full bg-primary/10 flex items-center justify-center">
            <CheckCircle2 className="size-9 text-primary" />
          </div>
          <h1 className="text-2xl font-bold mt-5">Order Pathano Hoyeche!</h1>
          <p className="text-muted-foreground mt-2">Apnar order ID:</p>
          <code className="block mt-2 text-xs bg-secondary p-2 rounded-md break-all">{orderId}</code>
          <p className="text-sm mt-5 text-muted-foreground">
            Admin payment verify korar shathe shathei email e credit pathiye dewa hobe. Generally 5–30 minute lage.
          </p>
          <Button asChild className="mt-6 rounded-full bg-gradient-to-r from-primary to-[oklch(0.68_0.2_295)] text-primary-foreground"><Link to="/">Home e firun</Link></Button>
        </Card>
      </main>
      <Footer />
    </div>
  );
}