import React from 'react';
import './styles.sass';

export const Grid = ({
  children,
  columns = 'auto-fill',
  minWidth = '300px',
  gap = '1.5rem',
  className = '',
  ...rest
}) => {
  const gridStyle = {
    '--grid-columns': columns === 'auto-fill' ? `repeat(auto-fill, minmax(${minWidth}, 1fr))` : `repeat(${columns}, 1fr)`,
    '--grid-gap': gap
  };

  return (
    <div 
      className={`grid ${className}`} 
      style={gridStyle}
      {...rest}
    >
      {children}
    </div>
  );
};