"use client";

import { Skeleton } from "@/components/atoms/loading-skeleton";

/**
 * Loading skeleton displayed while profile data is being fetched.
 * Matches the layout of PersonalInfoCard, AddressCard, and VerificationCard.
 */
export function ProfileLoadingSkeleton() {
  return (
    <div className="space-y-8">
      {/* Personal Information Card Skeleton */}
      <div className="bg-card border border-border rounded-xl shadow-[var(--cp-shadow-1)]">
        <div className="px-6 py-5 border-b border-border">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="h-6 w-6 bg-muted rounded" />
              <div className="h-6 w-40 bg-muted rounded" />
            </div>
            <div className="h-8 w-20 bg-muted rounded" />
          </div>
        </div>
        <div className="p-6">
          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
            {Array.from({ length: 4 }).map((_, i) => (
              <div key={i} className="space-y-2">
                <Skeleton className="h-4 w-24" />
                <Skeleton className="h-10 w-full" />
              </div>
            ))}
            <div className="sm:col-span-2">
              <Skeleton className="h-4 w-28 mb-3" />
              <div className="bg-card rounded-lg p-4 border border-border shadow-sm">
                <div className="flex items-center justify-between">
                  <Skeleton className="h-5 w-48" />
                  <Skeleton className="h-5 w-24" />
                </div>
                <Skeleton className="h-3 w-64 mt-2" />
              </div>
            </div>
          </div>
          <div className="flex items-center justify-end space-x-3 pt-6 border-t border-border mt-6">
            <Skeleton className="h-9 w-24" />
            <Skeleton className="h-9 w-28" />
          </div>
        </div>
      </div>

      {/* Address Card Skeleton */}
      <div className="bg-card border border-border rounded-xl shadow-[var(--cp-shadow-1)]">
        <div className="px-6 py-5 border-b border-border">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="h-6 w-6 bg-muted rounded" />
              <div className="h-6 w-48 bg-muted rounded" />
            </div>
            <div className="h-8 w-20 bg-muted rounded" />
          </div>
        </div>
        <div className="p-6">
          <div className="bg-card rounded-lg p-4 border border-border shadow-sm">
            <div className="space-y-2">
              <Skeleton className="h-4 w-60" />
              <Skeleton className="h-4 w-48" />
              <Skeleton className="h-4 w-52" />
              <Skeleton className="h-4 w-32" />
            </div>
          </div>
          <div className="flex items-center justify-end space-x-3 pt-6">
            <Skeleton className="h-9 w-24" />
            <Skeleton className="h-9 w-28" />
          </div>
        </div>
      </div>

      {/* Verification Card Skeleton */}
      <div className="bg-card border border-border rounded-xl shadow-[var(--cp-shadow-1)]">
        <div className="px-6 py-5 border-b border-border">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-3">
              <div className="h-6 w-6 bg-muted rounded" />
              <div className="h-6 w-40 bg-muted rounded" />
            </div>
            <Skeleton className="h-6 w-20" />
          </div>
        </div>
        <div className="p-6">
          <div className="space-y-3">
            <Skeleton className="h-4 w-48" />
            <Skeleton className="h-4 w-32" />
          </div>
        </div>
      </div>
    </div>
  );
}
