import { ReactNode } from 'react';
import { defaultLayoutConfig, type LayoutConfig } from '~/lib/layout-utils';

interface GridProps {
  children: ReactNode;
  className?: string;
  config?: Partial<LayoutConfig>;
  cols?: 1 | 2 | 3 | 4 | 6 | 12;
  gap?: 'sm' | 'md' | 'lg' | 'xl';
  responsive?: {
    sm?: 1 | 2 | 3 | 4 | 6 | 12;
    md?: 1 | 2 | 3 | 4 | 6 | 12;
    lg?: 1 | 2 | 3 | 4 | 6 | 12;
    xl?: 1 | 2 | 3 | 4 | 6 | 12;
  };
}

export function Grid({ 
  children, 
  className = '', 
  config = {},
  cols = 1,
  gap = 'md',
  responsive = {}
}: GridProps) {
  const layoutConfig = { ...defaultLayoutConfig, ...config };
  
  const colsClasses = {
    1: 'grid-cols-1',
    2: 'grid-cols-2',
    3: 'grid-cols-3',
    4: 'grid-cols-4',
    6: 'grid-cols-6',
    12: 'grid-cols-12',
  };
  
  const gapClasses = {
    sm: 'gap-2',
    md: 'gap-4',
    lg: 'gap-6',
    xl: 'gap-8',
  };
  
  const responsiveClasses = Object.entries(responsive)
    .map(([breakpoint, cols]) => `${breakpoint}:${colsClasses[cols]}`)
    .join(' ');
  
  return (
    <div 
      className={`grid-rtl ${colsClasses[cols]} ${gapClasses[gap]} ${responsiveClasses} ${className}`}
      dir={layoutConfig.direction}
    >
      {children}
    </div>
  );
}