import { MangaCard } from "./MangaCard";

type Manga = {
  slug: string;
  title: string;
  coverUrl: string;
  _count?: { chapters: number };
};

export function MangaGrid({ manga }: { manga: Manga[] }) {
  if (manga.length === 0) {
    return (
      <div className="flex flex-col items-center justify-center py-24 text-center">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth={1.5}
          className="w-16 h-16 text-muted/40 mb-4"
        >
          <path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1 0-5H20" />
        </svg>
        <p className="text-muted text-lg font-medium">No manga yet</p>
        <p className="text-muted/60 text-sm mt-1">
          Check back soon for new titles
        </p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 gap-3 sm:gap-4">
      {manga.map((m) => (
        <MangaCard
          key={m.slug}
          slug={m.slug}
          title={m.title}
          coverUrl={m.coverUrl}
          chapterCount={m._count?.chapters}
        />
      ))}
    </div>
  );
}