"use client";

import { Separator, Skeleton } from "@heroui/react";

/**
 * Cart content skeleton matching the new card-based layout.
 * Renders heading skeleton + 3 item card skeletons + summary skeleton.
 */
export function CartContentSkeleton() {
  return (
    <div className="flex flex-col gap-4">
      {/* Heading skeleton */}
      <div className="flex items-center gap-2">
        <Skeleton className="h-7 w-16 rounded" />
        <Skeleton className="h-5 w-8 rounded-full" />
      </div>

      {/* Item cards */}
      <div className="flex flex-col">
        {[0, 1, 2].map((i) => (
          <div key={i}>
            <CartItemSkeleton />
            {i < 2 && <Separator className="my-3" />}
          </div>
        ))}
      </div>

      <Separator className="my-1" />

      {/* Summary skeleton */}
      <div className="flex flex-col gap-3">
        <div className="flex justify-between">
          <Skeleton className="h-4 w-16 rounded" />
          <Skeleton className="h-4 w-14 rounded" />
        </div>
        <div className="flex justify-between">
          <Skeleton className="h-4 w-16 rounded" />
          <Skeleton className="h-4 w-28 rounded" />
        </div>
        <Separator />
        <div className="flex justify-between">
          <Skeleton className="h-5 w-12 rounded" />
          <Skeleton className="h-5 w-16 rounded" />
        </div>
      </div>

      {/* CTA skeleton */}
      <Skeleton className="h-11 w-full rounded-full" />
      <Skeleton className="h-10 w-full rounded-lg" />
    </div>
  );
}

function CartItemSkeleton() {
  return (
    <div className="flex items-start gap-3">
      <Skeleton className="size-14 shrink-0 rounded-xl" />
      <div className="flex flex-1 flex-col gap-2">
        <div className="flex items-start justify-between gap-2">
          <div className="flex flex-col gap-1.5">
            <Skeleton className="h-4 w-32 rounded" />
            <Skeleton className="h-5 w-16 rounded-full" />
          </div>
          <Skeleton className="size-8 shrink-0 rounded-lg" />
        </div>
        <div className="flex items-center justify-between gap-2">
          <Skeleton className="h-4 w-14 rounded" />
          <Skeleton className="h-8 w-24 rounded-lg" />
        </div>
      </div>
    </div>
  );
}
