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

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

export function MediaGrid({
  children,
  columns = { base: 1, sm: 2, md: 3, lg: 4 },
  gap = 4,
}: MediaGridProps) {
  return (
    <Grid
      cols={columns}
      gap={gap}
    >
      {children}
    </Grid>
  );
}