import React, { ReactNode } from 'react';
import { Grid } from './Grid';

interface FeatureGridProps {
  children: ReactNode;
  columns?: number | { base: number; md?: number; lg?: number; xl?: number };
  gap?: number;
}

/**
 * FeatureGrid - A semantic layout for displaying features or pillars.
 * Allowed to use Grid primitive.
 */
export function FeatureGrid({ children, columns = { base: 1, md: 3 }, gap = 8 }: FeatureGridProps) {
  return (
    <Grid cols={columns} gap={gap}>
      {children}
    </Grid>
  );
}