import type { FormFieldType } from '~/src/ui/components/form';
import type { FormBuilderI18nTerms } from './types';

import { useI18n } from '~/src/lib/i18n';
import { Tag } from '~/src/ui/primitives/tag';

const getFieldCategory = (type: FormFieldType): FormBuilderI18nTerms => {
  switch (type) {
    case 'select':
      return 'fieldCategory.select';
    case 'radio':
      return 'fieldCategory.radio';
    case 'checkbox':
      return 'fieldCategory.checkbox';
    case 'textarea':
      return 'fieldCategory.textArea';
    case 'date':
      return 'fieldCategory.datePicker';
    default:
      return 'fieldCategory.input';
  }
};

export const FieldCategory = ({ type }: { type: FormFieldType }) => {
  const category = getFieldCategory(type);
  const { t } = useI18n('formBuilder');

  return <Tag>{t(category)}</Tag>;
};