/**
 * FormFieldGrid - 반응형 폼 필드 그리드
 *
 * 모바일: 1컬럼
 * 태블릿: 2컬럼
 * 데스크톱: 3컬럼 (또는 사용자 지정)
 */

import { ReactNode } from "react";

export interface FormFieldGridProps {
  children: ReactNode;
  columns?: 1 | 2 | 3 | 4;
  className?: string;
}

export function FormFieldGrid({
  children,
  columns = 3,
  className = "",
}: FormFieldGridProps) {

  const gridClasses = {
    1: "grid-cols-1",
    2: "grid-cols-1 md:grid-cols-2",
    3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
    4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
  };

  return (
    <div className={`grid ${gridClasses[columns]} gap-4 ${className}`}>
      {children}
    </div>
  );
}