import { useSearch, Link } from "wouter";
import { CheckCircle2, ShoppingBag } from "lucide-react";

export default function OrderConfirmationPage() {
  const search = useSearch();
  const params = new URLSearchParams(search);
  const orderNumber = params.get("order");

  return (
    <div className="max-w-lg mx-auto px-4 py-20 text-center" data-testid="order-confirmation-page">
      <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
        <CheckCircle2 size={40} className="text-green-600" />
      </div>
      <h1 className="text-3xl font-bold mb-3">Order confirmed!</h1>
      {orderNumber && (
        <p className="text-muted-foreground mb-2">
          Order <span className="font-mono font-semibold text-foreground" data-testid="order-number">#{orderNumber}</span>
        </p>
      )}
      <p className="text-muted-foreground mb-8">
        Thank you for your purchase. A confirmation email has been sent to you. You can track your order in your account.
      </p>
      <div className="flex flex-col sm:flex-row gap-3 justify-center">
        <Link
          href="/account"
          className="px-6 py-3 border border-border rounded-md font-medium text-sm hover:bg-muted transition-colors"
          data-testid="link-view-orders"
        >
          View orders
        </Link>
        <Link
          href="/"
          className="px-6 py-3 bg-primary text-primary-foreground rounded-md font-medium text-sm hover:bg-primary/90 transition-colors flex items-center gap-2 justify-center"
          data-testid="link-continue-shopping"
        >
          <ShoppingBag size={16} />
          Continue shopping
        </Link>
      </div>
    </div>
  );
}