/**
 * Skeleton loading components for better perceived performance
 */

export function TableSkeleton({ rows = 5 }: { rows?: number }) {
  return (
    <div className="bg-card shadow rounded-lg overflow-hidden">
      <table className="min-w-full divide-y divide-border">
        <thead className="bg-muted">
          <tr>
            {[1, 2, 3, 4, 5].map((col) => (
              <th key={col} className="px-6 py-3">
                <div className="h-4 bg-muted rounded animate-pulse" />
              </th>
            ))}
          </tr>
        </thead>
        <tbody className="bg-card divide-y divide-border">
          {Array.from({ length: rows }).map((_, rowIndex) => (
            <tr key={rowIndex}>
              {[1, 2, 3, 4, 5].map((col) => (
                <td key={col} className="px-6 py-4">
                  <div className="h-4 bg-muted rounded animate-pulse" style={{ width: `${60 + Math.random() * 40}%` }} />
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export function CardSkeleton({ cards = 3 }: { cards?: number }) {
  return (
    <div className="space-y-4">
      {Array.from({ length: cards }).map((_, index) => (
        <div key={index} className="bg-card shadow rounded-lg p-4 animate-pulse">
          <div className="mb-3">
            <div className="h-6 bg-muted rounded w-1/2 mb-2" />
            <div className="h-4 bg-muted rounded w-1/3" />
          </div>
          <div className="grid grid-cols-2 gap-3 mb-4">
            <div>
              <div className="h-3 bg-muted rounded w-20 mb-1" />
              <div className="h-4 bg-muted rounded w-24" />
            </div>
            <div>
              <div className="h-3 bg-muted rounded w-20 mb-1" />
              <div className="h-4 bg-muted rounded w-16" />
            </div>
          </div>
          <div className="flex gap-2 pt-3 border-t border-border">
            <div className="flex-1 h-11 bg-muted rounded" />
            <div className="flex-1 h-11 bg-muted rounded" />
          </div>
        </div>
      ))}
    </div>
  );
}

export function VIPCardSkeleton({ cards = 6 }: { cards?: number }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {Array.from({ length: cards }).map((_, index) => (
        <div key={index} className="bg-card rounded-lg shadow p-6 animate-pulse">
          <div className="flex items-start justify-between mb-4">
            <div className="flex-1">
              <div className="h-6 bg-muted rounded w-3/4 mb-2" />
              <div className="h-4 bg-muted rounded w-1/2" />
            </div>
          </div>
          <div className="space-y-3">
            <div className="flex items-center">
              <div className="h-4 w-4 bg-muted rounded mr-2" />
              <div className="h-4 bg-muted rounded w-32" />
            </div>
            <div className="flex items-center">
              <div className="h-4 w-4 bg-muted rounded mr-2" />
              <div className="h-4 bg-muted rounded w-24" />
            </div>
            <div className="flex items-center">
              <div className="h-4 w-4 bg-muted rounded mr-2" />
              <div className="h-4 bg-muted rounded w-40" />
            </div>
          </div>
          <div className="mt-4 pt-4 border-t border-border flex gap-2">
            <div className="flex-1 h-9 bg-muted rounded" />
            <div className="flex-1 h-9 bg-muted rounded" />
          </div>
        </div>
      ))}
    </div>
  );
}
