"use client";

import ProjectCardSkeleton from './project-card-skeleton';
import ProjectListItemSkeleton from './project-list-item-skeleton';

interface ProjectGridSkeletonProps {
  viewMode?: 'grid' | 'list';
  count?: number;
}

/**
 * Componente skeleton para ProjectGrid
 * Muestra múltiples skeletons de tarjetas mientras cargan los datos
 * Soporta vista grid y lista
 */
export default function ProjectGridSkeleton({ 
  viewMode = 'grid', 
  count = 6 
}: ProjectGridSkeletonProps) {
  // Vista de lista
  if (viewMode === 'list') {
    return (
      <div className="flex flex-col gap-3">
        {Array.from({ length: count }).map((_, index) => (
          <ProjectListItemSkeleton key={index} />
        ))}
      </div>
    );
  }

  // Vista de grid (por defecto)
  return (
    <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
      {Array.from({ length: count }).map((_, index) => (
        <ProjectCardSkeleton key={index} />
      ))}
    </div>
  );
}