'use client';

import { cn } from '@/lib/utils';

interface SkeletonProps {
  className?: string;
}

export function Skeleton({ className }: SkeletonProps) {
  return (
    <div className={cn('animate-pulse rounded-lg bg-gray-100', className)} />
  );
}

// ── Dashboard Stats Skeleton ─────────────────────────────
export function StatsSkeleton() {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5">
      {Array.from({ length: 4 }).map((_, i) => (
        <div
          key={i}
          className="bg-white rounded-2xl p-5 border border-gray-100 space-y-3"
        >
          <div className="flex items-center justify-between">
            <Skeleton className="w-10 h-10 rounded-xl" />
            <Skeleton className="w-16 h-6 rounded-full" />
          </div>
          <Skeleton className="w-24 h-8" />
          <Skeleton className="w-32 h-4" />
        </div>
      ))}
    </div>
  );
}

// ── Table Row Skeleton ────────────────────────────────────
export function TableSkeleton({ rows = 5 }: { rows?: number }) {
  return (
    <div className="space-y-3 p-6">
      {Array.from({ length: rows }).map((_, i) => (
        <div key={i} className="flex items-center gap-4">
          <Skeleton className="w-20 h-4" />
          <Skeleton className="w-32 h-4" />
          <Skeleton className="flex-1 h-4" />
          <Skeleton className="w-20 h-6 rounded-full" />
          <Skeleton className="w-20 h-4" />
        </div>
      ))}
    </div>
  );
}

// ── Profile Skeleton ──────────────────────────────────────
export function ProfileSkeleton() {
  return (
    <div className="bg-white rounded-2xl border border-gray-100 overflow-hidden">
      <Skeleton className="h-24 rounded-none" />
      <div className="px-6 -mt-8 mb-4">
        <Skeleton className="w-16 h-16 rounded-2xl" />
      </div>
      <div className="px-6 pb-6 space-y-3">
        <Skeleton className="w-48 h-6" />
        <Skeleton className="w-32 h-5" />
        <Skeleton className="w-full h-4" />
        <Skeleton className="w-full h-4" />
        <Skeleton className="w-full h-10 rounded-xl" />
      </div>
    </div>
  );
}