frontend/src/components/ContentGrid.tsx

import React from 'react';
import ContentCard from './ContentCard';

export interface ContentItem {
  type: 'movie' | 'tvshow';
  title: string;
  image?: string;
  description?: string;
  genre?: string[];
  year?: number | string;
}

interface ContentGridProps {
  items: ContentItem[];
  emptyMessage?: string;
}

const ContentGrid: React.FC<ContentGridProps> = ({ items, emptyMessage = "No content available" }) => {
  if (!items || items.length === 0) {
    return (
      <div className="flex items-center justify-center py-16">
        <p className="text-netflix-gray text-lg">{emptyMessage}</p>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-4 md:gap-6 px-4 md:px-8">
      {items.map((item, index) => (
        <ContentCard
          key={`${item.title}-${index}`}
          type={item.type}
          title={item.title}
          image={item.image}
          description={item.description}
          genre={item.genre}
          year={item.year}
        />
      ))}
    </div>
  );
};

export default ContentGrid;