import React from 'react'

import { StoryCard, type StoryCardData } from '@/components/StoryCard'

type StoryGridProps = {
  stories: StoryCardData[]
  chapterCounts?: Record<string, number>
}

export const StoryGrid: React.FC<StoryGridProps> = ({ stories, chapterCounts }) => {
  if (!stories || stories.length === 0) {
    return (
      <div className="py-16 text-center text-muted-foreground">Chưa có truyện nào.</div>
    )
  }

  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
      {stories.map((story) => (
        <StoryCard
          key={String(story.id)}
          story={story}
          chapterCount={chapterCounts?.[String(story.id)]}
        />
      ))}
    </div>
  )
}