'use client';

/* FinanceSkeleton — phase 05 (FIN-01).
 * Purpose: initial-load placeholder for /mobile/finance.
 *   Layout: 4 KPI tile skeletons (2×2 grid) + 1 aging row (3 cells) + 2 list-row skeleton blocks (3 rows each).
 * Pure presentational — no props.
 * UI-SPEC §"Skeleton Loading State [D-17]". */

import { Skeleton } from '@/components/ui/skeleton';

export function FinanceSkeleton() {
  const listRowSkeleton = (
    <div className="space-y-3">
      {[0, 1, 2].map((i) => (
        <div key={i} className="px-4 py-3 flex justify-between gap-2">
          <Skeleton className="h-4 w-2/3" />
          <Skeleton className="h-4 w-16" />
        </div>
      ))}
    </div>
  );

  return (
    <div className="px-4 py-4 space-y-6">
      {/* 4 KPI tile skeletons — 2×2 grid */}
      <div className="grid grid-cols-2 gap-3">
        <Skeleton className="h-20 rounded-xl" />
        <Skeleton className="h-20 rounded-xl" />
        <Skeleton className="h-20 rounded-xl" />
        <Skeleton className="h-20 rounded-xl" />
      </div>

      {/* Aging row skeleton — 3 cells */}
      <div className="grid grid-cols-3 gap-2">
        <Skeleton className="h-16 rounded-xl" />
        <Skeleton className="h-16 rounded-xl" />
        <Skeleton className="h-16 rounded-xl" />
      </div>

      {/* Invoice list-row skeletons */}
      {listRowSkeleton}

      {/* Payment list-row skeletons */}
      {listRowSkeleton}
    </div>
  );
}