"use client";

import { useEffect } from "react";
import Link from "next/link";
import { CheckCircle, ShoppingBag, Home } from "lucide-react";
import { useCartStore } from "@/store/cartStore";

export default function CheckoutSuccessPage() {
  const clearCart = useCartStore((s) => s.clearCart);

  useEffect(() => {
    clearCart();
  }, [clearCart]);

  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center px-4">
      <div className="max-w-md w-full bg-white rounded-3xl shadow-sm p-10 text-center">
        <div className="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
          <CheckCircle className="h-10 w-10 text-green-500" />
        </div>
        <h1 className="text-2xl font-bold text-gray-900 mb-2">Order Confirmed!</h1>
        <p className="text-gray-500 text-sm leading-relaxed mb-8">
          Thank you for your order! You&apos;ll receive a confirmation email shortly. Your order is being processed and will ship within 1-2 business days.
        </p>
        <div className="flex flex-col sm:flex-row gap-3">
          <Link href="/shop" className="btn-outline flex-1 justify-center">
            <ShoppingBag className="h-4 w-4" />
            Continue Shopping
          </Link>
          <Link href="/" className="btn-primary flex-1 justify-center">
            <Home className="h-4 w-4" />
            Go Home
          </Link>
        </div>
      </div>
    </div>
  );
}