export const Grid = ({
  columns = 2,
  variant = 'mobile',
  children,
  className = '',
  ...props
}) => {
  const gridClasses = {
    mobile: {
      2: 'grid-mobile-2',
      3: 'grid-mobile-3',
      4: 'grid-mobile-4',
      8: 'grid-mobile-8',
    },
    desktop: {
      2: 'grid-desktop-2',
      3: 'grid-desktop-3',
      4: 'grid-desktop-4',
      8: 'grid-desktop-8',
    },
    'desktop-lg': {
      12: 'grid-desktop-lg-12',
      16: 'grid-desktop-lg-16',
    },
  };

  const variantClasses = gridClasses[variant] || gridClasses.mobile;
  const gridClass = variantClasses[columns] || variantClasses[2] || variantClasses[12];
  const classes = `${gridClass} ${className}`.trim();

  return (
    <div className={classes} {...props}>
      {children}
    </div>
  );
};

export default Grid;

