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="flex flex-wrap justify-center -mx-3 xl:-mx-6 2xl:-mx-10">
      <div className="2xl:w-6/12 xl:w-6/12 lg:w-8/12 md:w-7/12 sm:w-full w-full px-3 xl:px-6 2xl:px-10 mb-4 mb-lg-0">
        <div className="w-full bg-white rounded-2xl p-5 md:p-8 text-center">
          <div className="mx-auto flex items-center justify-center w-16 h-16 md:w-20 md:h-20 rounded-full bg-green-100">
            <svg className="w-7 h-7 md:w-10 md:h-10 text-green-600" 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 md:mt-6 text-xl md:text-3xl font-bold text-gray-900">Order Successful!</h1>
          <p className="mt-1 md:mt-3 text-gray-600">Thank you for your purchase. Your order has been placed successfully and is now being processed.</p>
          <div className="mt-6 bg-gray-50 rounded-xl p-4 text-left">
            <div className="flex justify-between mb-2 text-xs md:text-sm">
              <span className="text-gray-500">Order ID</span>
              <span className="font-semibold">#{order?.order_id}</span>
            </div>
            <div className="flex justify-between mb-2 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 sm:flex-row gap-3">
            <Link href="javascript:void(0);" className="flex-1 theme-btn">Track Order</Link>
            <Link href="/products" className="flex-1 default-btn 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 container-xxl px-3">
    <div className="flex flex-wrap -mx-2">
      <div className="xxl:w-1/4 xl:w-1/4 lg:w-1/4 md:w-1/3 sm:w-full w-full px-2">
        <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 xl:w-1/2 lg:w-1/2 md:w-1/2 sm:w-full w-full px-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="flex mb-2">
            <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 xl:w-1/4 lg:w-1/4 md:w-1/3 sm:w-full w-full px-2">
        <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>
  )
}