import React from "react";
import { Skeleton } from "@/components/ui/skeleton";
import Container from "@/components/shared/Container";
import ShoppingProcess from "@/components/shared/shopping-process";

/**
 * Skeleton loader for cart page
 * Shows loading placeholders matching the cart page structure
 */
export default function CartSkeleton() {
  return (
    <Container>
      {/* Shopping process steps */}
      <ShoppingProcess activeStep={1} />

      <section className="flex flex-col gap-8 lg:flex-row">
        {/* Left section - Product list and actions */}
        <section className="flex flex-col flex-1">
          {/* Cart product list skeleton */}
          <div className="space-y-4">
            {/* Header skeleton */}
            <header className="flex items-center justify-between gap-4 py-2 text-sm font-semibold border-b">
              <Skeleton className="h-5 w-32" />
              <div className="flex justify-between w-1/2">
                <Skeleton className="h-5 w-20" />
                <Skeleton className="h-5 w-24" />
                <Skeleton className="h-5 w-20" />
              </div>
            </header>

            {/* Product items skeleton */}
            <ul className="space-y-4">
              {[...Array(3)].map((_, index) => (
                <li key={index} className="flex items-center gap-4 border-b py-4">
                  {/* Product image */}
                  <Skeleton className="h-24 w-24 shrink-0 rounded" />

                  {/* Product info */}
                  <div className="flex-1 space-y-2">
                    <Skeleton className="h-5 w-3/4" />
                    <Skeleton className="h-4 w-1/2" />
                  </div>

                  {/* Price, quantity, subtotal */}
                  <div className="w-1/2 flex justify-between items-center">
                    <Skeleton className="h-6 w-20" />
                    <Skeleton className="h-10 w-24" />
                    <Skeleton className="h-6 w-20" />
                  </div>
                </li>
              ))}
            </ul>
          </div>

          {/* Cart actions skeleton */}
          <div className="flex justify-between gap-4 my-4">
            <Skeleton className="h-10 w-48" />
            <Skeleton className="h-10 w-32" />
          </div>

          {/* Coupon input skeleton */}
          <div className="my-4 space-y-2">
            <Skeleton className="h-4 w-24" />
            <Skeleton className="h-10 w-full" />
            <Skeleton className="h-10 w-32" />
          </div>
        </section>

        {/* Right section - Cart totals */}
        <aside className="w-full lg:w-1/3">
          <div className="flex flex-col gap-3 p-4 bg-white border rounded">
            {/* Header */}
            <header>
              <Skeleton className="h-6 w-32 mb-4" />
            </header>

            {/* Totals skeleton */}
            <dl className="space-y-5">
              {/* Subtotal */}
              <div className="flex justify-between border-b border-[#EEEEEE] pb-3">
                <Skeleton className="h-5 w-20" />
                <Skeleton className="h-5 w-24" />
              </div>

              {/* Shipping, Tax, Discount */}
              <div className="space-y-2">
                <div className="flex justify-between">
                  <Skeleton className="h-4 w-16" />
                  <Skeleton className="h-4 w-20" />
                </div>
                <div className="flex justify-between">
                  <Skeleton className="h-4 w-12" />
                  <Skeleton className="h-4 w-20" />
                </div>
                <div className="flex justify-between">
                  <Skeleton className="h-4 w-20" />
                  <Skeleton className="h-4 w-20" />
                </div>

                {/* Grand Total */}
                <div className="flex justify-between py-2 border-t border-gray-200 mt-3">
                  <Skeleton className="h-6 w-16" />
                  <Skeleton className="h-6 w-28" />
                </div>
              </div>
            </dl>

            {/* Checkout button */}
            <footer className="mt-4">
              <Skeleton className="h-12 w-full" />
            </footer>
          </div>
        </aside>
      </section>
    </Container>
  );
}