import type {
  FormConfigField,
  FormPresetField,
} from '~/src/ui/components/form';

import { getFieldPresets } from '~/src/ui/components/form';
import { Layout } from '~/src/ui/layouts/layout';
import { FieldPreset } from './FieldPreset';

interface FieldPresetsProps {
  selectedFields: FormConfigField[];
  onSelected: (preset: FormPresetField) => void;
}

export const FieldPresets = ({
  selectedFields,
  onSelected,
}: FieldPresetsProps) => {
  return (
    <Layout column gap="3" shrink>
      {getFieldPresets().map((name) => (
        <FieldPreset
          key={name}
          name={name}
          isActive={selectedFields.some(
            (f) => f.type === 'preset' && f.name === name
          )}
          onClick={() => onSelected({ type: 'preset', name })}
        />
      ))}
    </Layout>
  );
};