---
interface Props {
  columns?: 1 | 2 | 3 | 4;
  gap?: string;
  className?: string;
}

const { 
  columns = 3, 
  gap = "gap-8",
  className = "" 
} = Astro.props;

// 根据列数动态设置网格类
const getGridClass = () => {
  switch(columns) {
    case 1: return 'grid-cols-1';
    case 2: return 'grid-cols-1 md:grid-cols-2';
    case 3: return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3';
    case 4: return 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4';
    default: return 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3';
  }
};

const gridClass = getGridClass();
---

<div class={`grid ${gridClass} ${gap} ${className}`}>
  <slot />
</div> 