import { RouteLoading } from "@/components/molecules/RouteLoading";
import { BackLink } from "@/components/molecules/BackLink";
import { ClipboardDocumentCheckIcon } from "@heroicons/react/24/outline";

export default function AccountOrderDetailLoading() {
  return (
    <RouteLoading
      icon={<ClipboardDocumentCheckIcon />}
      title="Order Details"
      description="Loading order details..."
      mode="content"
    >
      <BackLink href="/account/orders" label="Back to orders" />

      <div className="rounded-xl border border-border bg-card shadow-sm">
        <div className="border-b border-border px-6 py-6 sm:px-8">
          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
            <div className="flex flex-col gap-2">
              <div className="flex items-center gap-3">
                <div className="h-8 w-48 rounded cp-skeleton-shimmer" />
                <div className="h-6 w-24 rounded-full cp-skeleton-shimmer" />
              </div>
              <div className="h-4 w-64 rounded cp-skeleton-shimmer" />
            </div>

            <div className="flex items-start gap-6 sm:gap-8">
              <div className="text-right space-y-2">
                <div className="h-3 w-16 rounded cp-skeleton-shimmer" />
                <div className="h-9 w-24 rounded cp-skeleton-shimmer" />
              </div>
              <div className="text-right space-y-2">
                <div className="h-3 w-16 rounded cp-skeleton-shimmer" />
                <div className="h-9 w-24 rounded cp-skeleton-shimmer" />
              </div>
            </div>
          </div>
        </div>

        <div className="px-6 py-6 sm:px-8">
          <div className="flex flex-col gap-6">
            <div>
              <div className="mb-2 h-3 w-32 rounded cp-skeleton-shimmer" />
              <div className="space-y-4">
                {Array.from({ length: 3 }).map((_, idx) => (
                  <div
                    key={idx}
                    className="flex flex-col gap-3 rounded-xl border border-border bg-card px-4 py-4 sm:flex-row sm:items-center sm:justify-between"
                  >
                    <div className="flex flex-1 items-start gap-3">
                      <div className="h-6 w-6 rounded-lg cp-skeleton-shimmer flex-shrink-0" />
                      <div className="flex flex-1 items-baseline justify-between gap-4">
                        <div className="min-w-0 flex-1 space-y-2">
                          <div className="h-5 w-3/4 rounded cp-skeleton-shimmer" />
                          <div className="h-3 w-24 rounded cp-skeleton-shimmer" />
                        </div>
                        <div className="flex flex-col items-end gap-1">
                          <div className="h-6 w-28 rounded cp-skeleton-shimmer" />
                        </div>
                      </div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </RouteLoading>
  );
}
