import { useI18n } from '~/src/lib/i18n';
import { FormFieldPreset, getPresetField } from '~/src/ui/components/form';
import { Layout } from '~/src/ui/layouts/layout';
import { Button } from '~/src/ui/primitives/button';
import { Text } from '~/src/ui/primitives/text';
import { FieldCategory } from './FieldCategory';

interface FieldPresetProps {
  name: FormFieldPreset;
  isActive: boolean;
  onClick: () => void;
}

export const FieldPreset = (props: FieldPresetProps) => {
  const { name, isActive, onClick } = props;
  const preset = getPresetField(name);

  const { td } = useI18n('form');

  if (!preset) {
    return null;
  }

  return (
    <Button onClick={onClick} isActive={isActive} size="medium">
      <Layout justify="space-between" align="center">
        <Text variant="body-small">{td(`presets.${name}.label`) || name}</Text>
        <FieldCategory type={preset.type} />
      </Layout>
    </Button>
  );
};