// src/components/CategoryGrid.tsx
import React from 'react';
import { Grid } from '@mui/material';
import CategoryCard from './VideoCategory';
import { VideoCategory } from 'pages/Education/Education';

interface CategoryGridProps {
  categories: VideoCategory[];
  onSelectCategory: (categoryName: string) => void;
}

const CategoryGrid: React.FC<CategoryGridProps> = ({ categories, onSelectCategory }) => {
  return (
    <Grid container spacing={3}>
      {categories.map((category) => (
        <Grid size={{ xs: 12, sm: 6, md: 4 }} key={category.name}>
          <CategoryCard category={category} onSelectCategory={onSelectCategory} />
        </Grid>
      ))}
    </Grid>
  );
};

export default CategoryGrid;
