import * as React from 'react';
import { clsx } from 'clsx';

export interface FieldGridProps extends React.HTMLAttributes<HTMLDivElement> {
  columns?: 1 | 2 | 3;
}

const columnClass: Record<NonNullable<FieldGridProps['columns']>, string> = {
  1: 'grid-cols-1',
  2: 'grid-cols-1 md:grid-cols-2',
  3: 'grid-cols-1 md:grid-cols-2 xl:grid-cols-3',
};

export function FieldGrid({ columns = 2, className, ...props }: FieldGridProps) {
  return <div className={clsx('grid min-w-0 gap-4', columnClass[columns], className)} {...props} />;
}