"use client";

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

/**
 * Componente skeleton para ProjectListItem
 * Muestra un placeholder en formato de lista
 */
export default function ProjectListItemSkeleton() {
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-4">
      <div className="flex items-center gap-4">
        {/* Avatar skeleton */}
        <Skeleton className="w-12 h-12 rounded-lg flex-shrink-0" />

        {/* Info Principal skeleton */}
        <div className="flex-1 min-w-0">
          <div className="flex items-start justify-between gap-4">
            <div className="flex-1">
              <Skeleton className="h-5 w-48 mb-2" />
              <Skeleton className="h-4 w-32" />
            </div>
            
            {/* Estado skeleton */}
            <Skeleton className="h-6 w-20" />
          </div>
        </div>

        {/* Progreso skeleton */}
        <div className="hidden md:flex items-center gap-2 flex-shrink-0 w-32">
          <Skeleton className="w-4 h-4 rounded" />
          <div className="flex-1">
            <Skeleton className="h-3 w-full mb-1" />
            <Skeleton className="h-1.5 w-full rounded-full" />
          </div>
        </div>

        {/* Presupuesto skeleton */}
        <div className="hidden lg:flex items-center gap-2 flex-shrink-0">
          <Skeleton className="w-4 h-4 rounded" />
          <div className="text-right">
            <Skeleton className="h-5 w-20 mb-1" />
            <Skeleton className="h-3 w-16" />
          </div>
        </div>

        {/* Fechas skeleton */}
        <div className="hidden xl:flex items-center gap-2 flex-shrink-0">
          <Skeleton className="w-4 h-4 rounded" />
          <div className="text-right">
            <Skeleton className="h-5 w-16 mb-1" />
            <Skeleton className="h-3 w-12" />
          </div>
        </div>
      </div>
    </div>
  );
}