import React from 'react';
import { Box } from '@/ui/Box';

export interface MediaGridProps {
  children: React.ReactNode;
  columns?: {
    base?: number;
    sm?: number;
    md?: number;
    lg?: number;
    xl?: number;
  };
  gap?: 2 | 3 | 4 | 6 | 8;
}

export function MediaGrid({
  children,
  columns = { base: 1, sm: 2, md: 3, lg: 4 },
  gap = 4,
}: MediaGridProps) {
  return (
    <Box
      display="grid"
      responsiveGridCols={{
        base: columns.base,
        md: columns.md,
        lg: columns.lg,
      }}
      gap={gap}
    >
      {children}
    </Box>
  );
}
