// src/templates/CategoryGridTemplate.tsx
import React, { ReactNode } from 'react';
import { Grid } from '@mui/material';
import { GenericCategory } from 'types';

interface CategoryGridTemplateProps<TCategory extends GenericCategory> {
  categories: TCategory[];
  onSelectCategory: (categoryId: string) => void;
  renderCategoryCard: (category: TCategory, onSelect: (categoryId: string) => void) => ReactNode;
}

function CategoryGridTemplate<TCategory extends GenericCategory>({
  categories,
  onSelectCategory,
  renderCategoryCard,
}: CategoryGridTemplateProps<TCategory>) {
  return (
    <Grid container spacing={3}>
      {categories.map((category) => (
        <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }} key={category.id}>
          {renderCategoryCard(category, onSelectCategory)}
        </Grid>
      ))}
    </Grid>
  );
}

export default CategoryGridTemplate;
