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

interface Mod {
  id: string;
  slug: string;
  title: string;
  description: string;
  icon_url?: string;
  downloads: number;
  followers: number;
  categories: string[];
  project_type: string;
}

interface ModGridProps {
  mods: Mod[];
  isLoading?: boolean;
  title?: string;
}

const ModGrid = ({ mods, isLoading, title }: ModGridProps) => {
  return (
    <section className="py-8">
      {title && (
        <h2 className="mb-6 text-2xl font-bold">{title}</h2>
      )}
      {isLoading ? (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {Array.from({ length: 6 }).map((_, i) => (
            <div key={i} className="flex gap-4 rounded-lg border border-border bg-card p-4">
              <Skeleton className="h-16 w-16 shrink-0 rounded-lg" />
              <div className="flex-1 space-y-2">
                <Skeleton className="h-5 w-3/4" />
                <Skeleton className="h-4 w-full" />
                <Skeleton className="h-3 w-1/2" />
              </div>
            </div>
          ))}
        </div>
      ) : mods.length === 0 ? (
        <div className="py-12 text-center text-muted-foreground">
          لا توجد إضافات حالياً
        </div>
      ) : (
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
          {mods.map((mod) => (
            <ModCard
              key={mod.id}
              id={mod.id}
              slug={mod.slug}
              title={mod.title}
              description={mod.description}
              iconUrl={mod.icon_url}
              downloads={mod.downloads}
              followers={mod.followers}
              categories={mod.categories || []}
              projectType={mod.project_type}
            />
          ))}
        </div>
      )}
    </section>
  );
};

export default ModGrid;