"use client";

import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";

export default function ThankYou({ params  }: any) {
  const [orderNumber, setOrderNumber] = useState<string | null>(null);
  const router = useRouter();

  useEffect(() => {
    const order = localStorage.getItem("orderNumber");
    if (order) {
      setOrderNumber(order);
    } else {
      router.push("/orders");
    }
  }, [router]);

  return (
    <div className="bg-white min-h-screen flex flex-col items-center justify-center px-4 privacy-policy">
      <div className="cursor-pointer rounded-2xl shadow-lg p-8 max-w-md w-full text-center mt-15 hover:scale-105 transition-transform">
        
        {/* Cart SVG */}
        <img
          src="/images/thanks.svg"
          alt="Order Success"
          className="w-[10rem] md:w-[15rem] lg:w-[15rem] mx-auto mb-6"
          onClick={() => router.push("/orders")}
        />
         <h2 className="md:text-[28px] lg:text-[28px] text-[20px] text-primary font-book mb-2 flex justify-center items-center">
          شكرًا لاختيارك   <span className="text-primary mr-2">Yalla Cheese</span>
          <img
            src="/icons/letter.svg"
            alt=""
            className="mb-12 relative left-2"
          />
        </h2>

        <p className="text-gray-700 mb-4 leading-relaxed">
          لقد استلمنا طلبك بنجاح، رقم الطلب هو:
          <br />
          <span className="font-bold text-gray-900">
            {orderNumber || "—"}
          </span>
          <br />
          سيتم تجهيز طلبك وشحنه في أقرب وقت ممكن.
        </p>

        <button
          onClick={() => router.push("/orders")}
          className="w-full bg-[#FF2B77] hover:bg-pink-600 text-white py-3 rounded-xl transition"
        >
          تتبع طلبك
        </button>
      </div>
    </div>
  );
}