"use client";

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

export function CheckoutSkeleton() {
  return (
    <div className="flex flex-col gap-6">
      {/* Stepper skeleton — compact on mobile, bar on md+ */}
      <div>
        <Skeleton className="h-5 w-44 rounded md:hidden" />
        <div className="hidden items-center gap-2 md:flex">
          {[0, 1, 2, 3, 4].map((i) => (
            <div key={i} className="flex items-center gap-1">
              <Skeleton className="size-7 rounded-full" />
              <Skeleton className="h-4 w-16 rounded" />
              {i < 4 && <Skeleton className="mx-1 h-px w-4 lg:w-6" />}
            </div>
          ))}
        </div>
      </div>

      {/* Two-column on lg: line items + summary sidebar */}
      <div className="grid grid-cols-1 gap-6 lg:grid-cols-[1fr,340px] lg:items-start">
        {/* Line items */}
        <div className="flex flex-col gap-0">
          {[0, 1, 2].map((i) => (
            <div key={i}>
              <CheckoutItemSkeleton />
              {i < 2 && <Separator className="my-3" />}
            </div>
          ))}
        </div>

        {/* Summary sidebar */}
        <div className="flex flex-col gap-4 rounded-lg border border-default-200 p-4">
          <Skeleton className="h-5 w-24 rounded" />
          <div className="flex justify-between">
            <Skeleton className="h-4 w-20 rounded" />
            <Skeleton className="h-4 w-16 rounded" />
          </div>
          <div className="flex justify-between">
            <Skeleton className="h-4 w-28 rounded" />
            <Skeleton className="h-4 w-32 rounded" />
          </div>
          <Separator />
          <div className="flex justify-between">
            <Skeleton className="h-5 w-20 rounded" />
            <Skeleton className="h-5 w-20 rounded" />
          </div>
          <Skeleton className="h-11 w-full rounded-lg" />
          <Skeleton className="h-10 w-full rounded-lg" />
        </div>
      </div>
    </div>
  );
}

function CheckoutItemSkeleton() {
  return (
    <div className="flex items-start gap-3 py-1">
      <Skeleton className="size-16 shrink-0 rounded-xl" />
      <div className="flex flex-1 flex-col gap-2">
        <Skeleton className="h-4 w-36 rounded" />
        <Skeleton className="h-3 w-20 rounded" />
        <div className="flex items-center justify-between gap-2">
          <Skeleton className="h-4 w-24 rounded" />
          <Skeleton className="h-4 w-16 rounded" />
        </div>
      </div>
    </div>
  );
}
