import Link from "next/link";
import { CheckCircle2, Package, ArrowRight } from "lucide-react";

export default async function OrderSuccessPage({ searchParams }: { searchParams: Promise<{ order?: string }> }) {
  const { order } = await searchParams;
  return (
    <div className="min-h-screen bg-gradient-to-br from-sky-50 to-white flex items-center justify-center px-4">
      <div className="text-center max-w-md">
        <div className="w-24 h-24 rounded-full bg-emerald-100 flex items-center justify-center mx-auto mb-6">
          <CheckCircle2 className="w-12 h-12 text-emerald-500" />
        </div>
        <h1 className="text-3xl font-black text-slate-900 mb-2">Order Placed!</h1>
        {order && (
          <div className="bg-sky-50 rounded-xl px-6 py-3 mb-4 inline-block">
            <p className="text-sky-600 text-sm font-bold">Order #{order}</p>
          </div>
        )}
        <p className="text-slate-500 mb-8 leading-relaxed">
          Thank you for your order! We&apos;ll contact you shortly to confirm your order and arrange delivery.
          For M-Pesa payments, please send to Paybill <strong>123456</strong>.
        </p>
        <div className="flex flex-col sm:flex-row gap-3 justify-center">
          <Link href="/account/orders" className="flex items-center gap-2 bg-sky-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-sky-600 transition-colors">
            <Package className="w-4 h-4" /> Track Order
          </Link>
          <Link href="/" className="flex items-center gap-2 border-2 border-sky-200 text-sky-600 px-6 py-3 rounded-xl font-bold hover:bg-sky-50 transition-colors">
            Continue Shopping <ArrowRight className="w-4 h-4" />
          </Link>
        </div>
      </div>
    </div>
  );
}