import type { ComponentChildren, JSX } from 'preact';
import { cn } from '../core/cn';

export type FormGridColumns = 1 | 2 | 3 | 4;

export type FormGridProps = JSX.HTMLAttributes<HTMLDivElement> & {
  columns?: FormGridColumns;
  gap?: 'sm' | 'md';
  children?: ComponentChildren;
};

const COLUMNS: Record<FormGridColumns, string> = {
  1: 'ask-grid-cols-1',
  2: 'ask-grid-cols-1 sm:ask-grid-cols-2',
  3: 'ask-grid-cols-1 sm:ask-grid-cols-3',
  4: 'ask-grid-cols-1 sm:ask-grid-cols-2 lg:ask-grid-cols-4',
};

const GAP: Record<NonNullable<FormGridProps['gap']>, string> = {
  sm: 'ask-gap-2',
  md: 'ask-gap-3',
};

export function FormGrid({ className, columns = 2, gap = 'md', children, ...props }: FormGridProps) {
  return (
    <div className={cn('ask-form-grid ask-grid', COLUMNS[columns], GAP[gap], className)} {...props}>
      {children}
    </div>
  );
}
