'use client';
import React from "react";
import Link from "next/link";
import Loader from "@/components/common/Loader";

// Type definitions for order data
type OrderDetails = {
  id: string;
  date: string;
  paymentMethod: string;
  name: string;
  address: string;
  phone: string;
};

// Component for rendering order detail rows
const OrderDetailRow: React.FC<{
  label: string;
  value: string;
}> = ({ label, value }) => (
  <dl className="sm:flex items-center justify-between gap-4">
    <dt className="font-normal mb-1 sm:mb-0 text-gray-500">{label}</dt>
    <dd className="font-medium text-gray-900 sm:text-end">{value}</dd>
  </dl>
);

export default function OrderConfirmationPage() {
  // Mock order data - in a real app, this would come from props or API
  const orderDetails: OrderDetails = {
    id: "7564804",
    date: "14 May 2024",
    paymentMethod: "JPMorgan monthly installments",
    name: "Flowbite Studios LLC",
    address: "34 Scott Street, San Francisco, California, USA",
    phone: "+(123) 456 7890",
  };

  // Loading state - would be set to true during actual data fetching
  const [isLoading, setIsLoading] = React.useState(false);

  // Array of order details for DRY rendering
  const orderDetailItems = [
    { label: "Date", value: orderDetails.date },
    { label: "Payment Method", value: orderDetails.paymentMethod },
    { label: "Name", value: orderDetails.name },
    { label: "Address", value: orderDetails.address },
    { label: "Phone", value: orderDetails.phone },
  ];

  if (isLoading) {
    return <Loader />;
  }

  return (
    <section className="bg-white py-8 antialiased md:py-16">
      <div className="mx-auto max-w-2xl px-4 2xl:px-0">
        <h1 className="text-xl font-semibold text-gray-900 sm:text-2xl mb-2">
          Thanks for your order!
        </h1>

        <p className="text-gray-500 mb-6 md:mb-8">
          Your order{" "}
          <Link
            href="#"
            className="font-medium text-gray-900 hover:underline"
            aria-label={`View order ${orderDetails.id} details`}
          >
            #{orderDetails.id}
          </Link>{" "}
          will be processed within 24 hours during working days. We will notify
          you by email once your order has been shipped.
        </p>

        <div
          className="space-y-4 sm:space-y-2 rounded-lg border border-gray-100 bg-gray-50 p-6 mb-6 md:mb-8"
          aria-label="Order details"
        >
          {orderDetailItems.map((item, index) => (
            <OrderDetailRow
              key={`order-detail-${index}`}
              label={item.label}
              value={item.value}
            />
          ))}
        </div>

        <div className="flex items-center space-x-4">
          <Link
            href="/user/trackorder"
            className="text-white bg-primary hover:bg-secondary focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 focus:outline-none"
            aria-label="Track your order"
          >
            Track your order
          </Link>
          <Link
            href="/products"
            className="py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-100"
            aria-label="Return to shopping"
          >
            Return to shopping
          </Link>
        </div>
      </div>
    </section>
  );
}