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

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

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