import React from "react";
import dbConnect from "@/lib/mongodb";
import Order from "@/models/Order";
import Link from "next/link";
interface PageProps {
  searchParams: Promise<{
    order_id?: string;
  }>;
}

export default async function Page({ searchParams }: PageProps) {
  const params = await searchParams;
  const orderId = params.order_id;

  await dbConnect();

  const order = await Order.findOne({
    order_id: orderId,
  }).lean();
  return (
    <div>
      <section className="cartcontainer pt-7 md:pt-10">
        <div className="container px-3">
          <div className="-mx-3 flex flex-wrap justify-center xl:-mx-6 2xl:-mx-10">
            <div className="mb-lg-0 mb-4 w-full px-3 sm:w-full md:w-7/12 lg:w-8/12 xl:w-6/12 xl:px-6 2xl:w-6/12 2xl:px-10">
              <div className="w-full rounded-2xl bg-white p-5 text-center md:p-8">
                <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-green-100 md:h-20 md:w-20">
                  <svg
                    className="h-7 w-7 text-green-600 md:h-10 md:w-10"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    stroke-width="2.5"
                  >
                    <path
                      stroke-linecap="round"
                      stroke-linejoin="round"
                      d="M5 13l4 4L19 7"
                    />
                  </svg>
                </div>
                <h1 className="mt-4 text-xl font-bold text-gray-900 md:mt-6 md:text-3xl">
                  Order Successful!
                </h1>
                <p className="mt-1 text-gray-600 md:mt-3">
                  Thank you for your purchase. Your order has been placed
                  successfully and is now being processed.
                </p>
                <div className="mt-6 rounded-xl bg-gray-50 p-4 text-left">
                  <div className="mb-2 flex justify-between text-xs md:text-sm">
                    <span className="text-gray-500">Order ID</span>
                    <span className="font-semibold">#{order?.order_id}</span>
                  </div>
                  <div className="mb-2 flex justify-between text-xs md:text-sm">
                    <span className="text-gray-500">Date</span>
                    <span className="font-semibold">
                      {order?.createdAt?.toLocaleDateString()}
                    </span>
                  </div>
                  <div className="flex justify-between text-xs md:text-sm">
                    <span className="text-gray-500">Total</span>
                    <span className="font-semibold text-green-600">
                      ${order?.total_amount?.toFixed(2)}
                    </span>
                  </div>
                </div>
                <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                  <Link href="javascript:void(0);" className="theme-btn flex-1">
                    Track Order
                  </Link>
                  <Link
                    href="/products"
                    className="default-btn flex-1 bg-[rgba(var(--secondary),1)] text-[var(--theme-white)]"
                  >
                    Continue Shopping
                  </Link>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <div className="blogbtmimg">
        <img src="images/blog-btm-img.png" alt="" />
      </div>

      <section className="newslettercontainer !pt-0">
        <div className="container-xxl container px-3">
          <div className="-mx-2 flex flex-wrap">
            <div className="xxl:w-1/4 w-full px-2 sm:w-full md:w-1/3 lg:w-1/4 xl:w-1/4">
              <div className="contactinfo text-center">
                <h3>Contact Us</h3>
                <p>
                  Email:{" "}
                  <a href="mailto:wearhouse@dulhesahab.com">
                    wearhouse@dulhesahab.com
                  </a>
                </p>
                <p>
                  Phone: <a href="tel:18003099038">1800 309 9038</a>
                </p>
              </div>
            </div>
            <div className="xxl:w-1/2 w-full px-2 sm:w-full md:w-1/2 lg:w-1/2 xl:w-1/2">
              <div className="newsletterbx text-center">
                <h3>Let's Get in Touch!</h3>
                <p>
                  What' s inside? Exclusive sales, new arrivals & much more.
                </p>
                <div className="mb-2 flex">
                  <input
                    type="text"
                    className="form-control"
                    name=""
                    placeholder="Email Address"
                  />
                  <button className="subscribebtn" type="button">
                    Subscribe
                  </button>
                </div>
                <p className="m-0">
                  New styles, exclusive offers & more! Subscribe now
                </p>
              </div>
            </div>
            <div className="xxl:w-1/4 w-full px-2 sm:w-full md:w-1/3 lg:w-1/4 xl:w-1/4">
              <div className="socialbx text-center">
                <h3>Social Media</h3>
                <div className="socialrow">
                  <a href="javascript:void(0);" className="socialbtn">
                    <i className="icon icon-facebook"></i>
                    <span>Facebook</span>
                  </a>
                  <a href="javascript:void(0);" className="socialbtn">
                    <i className="icon icon-pinterest"></i>
                    <span>Pinterest</span>
                  </a>
                  <a href="javascript:void(0);" className="socialbtn">
                    <i className="icon icon-x"></i>
                    <span>X (Twitter)</span>
                  </a>
                  <a href="javascript:void(0);" className="socialbtn">
                    <i className="icon icon-instagram"></i>
                    <span>Instagram</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}