import Link from "next/link";
import {CheckCircle2, Calendar, Home} from "lucide-react";
import {Button} from "@/components/ui/button";
import {Card, CardContent} from "@/components/ui/card";

type SuccessPageProps = {
  searchParams: Promise<{bookingNumber?: string}>;
};

export default async function BookingSuccessPage({searchParams}: SuccessPageProps) {
  const {bookingNumber} = await searchParams;

  return (
    <div className="mx-auto max-w-lg px-6 py-20 text-center">
      <div className="mb-6 flex justify-center">
        <div className="flex h-20 w-20 items-center justify-center rounded-full bg-green-100">
          <CheckCircle2 className="h-10 w-10 text-green-600" />
        </div>
      </div>
      <h1 className="text-3xl font-bold text-slate-900">Booking Confirmed!</h1>
      <p className="mt-3 text-slate-600">
        Your booking has been successfully submitted. We'll review it and send you a confirmation shortly.
      </p>
      {bookingNumber && (
        <Card className="mt-6 border-green-200 bg-green-50">
          <CardContent className="p-5">
            <p className="text-sm text-slate-600">Booking Number</p>
            <p className="mt-1 text-2xl font-bold tracking-wide text-green-700">{bookingNumber}</p>
            <p className="mt-2 text-xs text-slate-500">Save this number for your records</p>
          </CardContent>
        </Card>
      )}
      <div className="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center">
        {bookingNumber && (
          <Link href={`/bookings/${bookingNumber}`}>
            <Button variant="outline" className="w-full sm:w-auto">
              <Calendar className="mr-2 h-4 w-4" />
              View Booking Details
            </Button>
          </Link>
        )}
        <Link href="/">
          <Button className="w-full sm:w-auto">
            <Home className="mr-2 h-4 w-4" />
            Back to Home
          </Button>
        </Link>
      </div>
      <p className="mt-6 text-sm text-slate-500">
        Want to book another car?{" "}
        <Link href="/cars" className="text-blue-600 hover:underline">
          Browse our fleet
        </Link>
      </p>
    </div>
  );
}