import React from "react";

interface ProductSkeletonProps {
  count?: number;
  className?: string;
  isGrid?: boolean;
}

export default function ProductSkeleton({ count = 1, className = "", isGrid = false }: ProductSkeletonProps) {
  const ProductCardSkeleton = () => (
    <div className="bg-white border border-neutrals100 rounded-lg overflow-hidden dark:bg-darkbg dark:border-darkborder shadow-sm dark:shadow-none">
      {/* Image skeleton */}
      <div className="relative w-full h-36 bg-neutrals100 dark:bg-card animate-pulse">
        <div className="absolute top-3 left-3 w-8 h-8 bg-neutrals200 dark:bg-background rounded-full animate-pulse" />
      </div>
      
      {/* Content skeleton */}
      <div className="p-3 space-y-2">
        {/* Title skeleton */}
        <div className="space-y-1.5">
          <div className="h-4 bg-neutrals100 dark:bg-background rounded animate-pulse" />
          <div className="h-4 bg-neutrals100 dark:bg-background rounded w-3/4 animate-pulse" />
        </div>
        
        {/* Price skeleton */}
        <div className="h-4 bg-neutrals100 dark:bg-background rounded w-1/2 animate-pulse" />
        
        {/* Location and time skeleton */}
        <div className="space-y-1.5">
          <div className="h-3 bg-neutrals100 dark:bg-background rounded w-2/3 animate-pulse" />
          <div className="h-3 bg-neutrals100 dark:bg-background rounded w-1/2 animate-pulse" />
        </div>
        
        {/* Seller info skeleton */}
        <div className="flex items-center gap-2 pt-1.5">
          <div className="w-8 h-8 bg-neutrals100 dark:bg-background rounded-full animate-pulse" />
          <div className="flex-1 space-y-1">
            <div className="h-3 bg-neutrals100 dark:bg-background rounded w-1/2 animate-pulse" />
            <div className="h-2 bg-neutrals100 dark:bg-background rounded w-1/3 animate-pulse" />
          </div>
        </div>
      </div>
    </div>
  );

  if (isGrid) {
    return (
      <div className={`grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 ${className}`}>
        {Array.from({ length: count }).map((_, index) => (
          <ProductCardSkeleton key={index} />
        ))}
      </div>
    );
  }

  return <ProductCardSkeleton />;
}