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

interface MobileLoadingStateProps {
  count?: number;
  type?: 'card' | 'list' | 'grid';
}

export const MobileLoadingState = ({ count = 3, type = 'card' }: MobileLoadingStateProps) => {
  if (type === 'card') {
    return (
      <div className="space-y-4 animate-fade-in">
        {Array.from({ length: count }).map((_, index) => (
          <div key={index} className="bg-white rounded-lg p-4 shadow-sm border border-gray-100">
            <div className="flex justify-between items-start mb-3">
              <div className="flex-1">
                <Skeleton className="h-4 w-3/4 mb-2" />
                <Skeleton className="h-3 w-16" />
              </div>
              <Skeleton className="h-8 w-8 rounded-full" />
            </div>
            
            <div className="flex space-x-4 mb-3">
              <Skeleton className="h-3 w-20" />
              <Skeleton className="h-3 w-24" />
            </div>
            
            <Skeleton className="h-3 w-full mb-2" />
            <Skeleton className="h-3 w-4/5 mb-4" />
            
            <div className="flex space-x-2">
              <Skeleton className="h-9 flex-1" />
              <Skeleton className="h-9 w-16" />
            </div>
          </div>
        ))}
      </div>
    );
  }

  if (type === 'grid') {
    return (
      <div className="grid grid-cols-5 gap-3 p-3 animate-fade-in">
        {Array.from({ length: 10 }).map((_, index) => (
          <div key={index} className="flex flex-col items-center">
            <Skeleton className="w-10 h-10 rounded-xl mb-1.5" />
            <Skeleton className="h-2 w-12" />
          </div>
        ))}
      </div>
    );
  }

  return (
    <div className="space-y-3 animate-fade-in">
      {Array.from({ length: count }).map((_, index) => (
        <div key={index} className="flex items-center space-x-3 p-3">
          <Skeleton className="h-10 w-10 rounded-full" />
          <div className="flex-1">
            <Skeleton className="h-4 w-3/4 mb-2" />
            <Skeleton className="h-3 w-1/2" />
          </div>
        </div>
      ))}
    </div>
  );
};