turash/bugulma/frontend/components/add-organization/steps/Step2.tsx

import { Control, FieldErrors } from 'react-hook-form';
import { useTranslation } from '@/hooks/useI18n.tsx';
import { resourceCategorySchema } from '@/schemas/category.ts';
import { OrganizationFormData } from '@/types.ts';
import DynamicFieldArray from '@/components/form/DynamicFieldArray.tsx';
import FormField from '@/components/form/FormField.tsx';
import Input from '@/components/ui/Input.tsx';
import Select from '@/components/ui/Select.tsx';

interface Step2Props {
  control: Control<OrganizationFormData>;
  errors: FieldErrors<OrganizationFormData>;
}

const Step2 = ({ control, errors }: Step2Props) => {
  const { t } = useTranslation();
  const categories = resourceCategorySchema.options;

  return (
    <div className="space-y-8">
      <DynamicFieldArray
        control={control}
        errors={errors}
        name="needs"
        title={t('addOrgWizard.step2.needsTitle')}
        addText={t('addOrgWizard.step2.addNeed')}
        defaultItem={{
          resource_name: '',
          quantity: '',
          description: '',
          category: 'Materials',
        }}
      >
        {(index) => (
          <div className="space-y-3 p-4 border rounded-lg bg-muted/50">
            <FormField
              control={control}
              errors={errors}
              name={`needs.${index}.resource_name`}
              label={t('addOrgWizard.step2.needsResource')}
            >
              {(field) => (
                <Input {...field} placeholder={t('addOrgWizard.step2.needsResourcePlaceholder')} />
              )}
            </FormField>
            <div className="grid grid-cols-2 gap-3">
              <FormField
                control={control}
                errors={errors}
                name={`needs.${index}.category`}
                label={t('addOrgWizard.step2.category')}
              >
                {(field) => (
                  <Select {...field}>
                    {categories.map((cat) => (
                      <option key={cat} value={cat}>
                        {cat}
                      </option>
                    ))}
                  </Select>
                )}
              </FormField>
              <FormField
                control={control}
                errors={errors}
                name={`needs.${index}.quantity`}
                label={t('addOrgWizard.step2.needsQuantity')}
              >
                {(field) => (
                  <Input
                    {...field}
                    placeholder={t('addOrgWizard.step2.needsQuantityPlaceholder')}
                  />
                )}
              </FormField>
            </div>
            <FormField
              control={control}
              errors={errors}
              name={`needs.${index}.description`}
              label={t('addOrgWizard.step2.needsDescription')}
            >
              {(field) => (
                <Input
                  {...field}
                  placeholder={t('addOrgWizard.step2.needsDescriptionPlaceholder')}
                />
              )}
            </FormField>
          </div>
        )}
      </DynamicFieldArray>

      <DynamicFieldArray
        control={control}
        errors={errors}
        name="offers"
        title={t('addOrgWizard.step2.offersTitle')}
        addText={t('addOrgWizard.step2.addOffer')}
        defaultItem={{
          resource_name: '',
          quantity: '',
          description: '',
          category: 'By-products',
        }}
      >
        {(index) => (
          <div className="space-y-3 p-4 border rounded-lg bg-muted/50">
            <FormField
              control={control}
              errors={errors}
              name={`offers.${index}.resource_name`}
              label={t('addOrgWizard.step2.offerItem')}
            >
              {(field) => (
                <Input {...field} placeholder={t('addOrgWizard.step2.offersPlaceholder')} />
              )}
            </FormField>
            <div className="grid grid-cols-2 gap-3">
              <FormField
                control={control}
                errors={errors}
                name={`offers.${index}.category`}
                label={t('addOrgWizard.step2.category')}
              >
                {(field) => (
                  <Select {...field}>
                    {categories.map((cat) => (
                      <option key={cat} value={cat}>
                        {cat}
                      </option>
                    ))}
                  </Select>
                )}
              </FormField>
              <FormField
                control={control}
                errors={errors}
                name={`offers.${index}.quantity`}
                label={t('addOrgWizard.step2.needsQuantity')}
              >
                {(field) => (
                  <Input
                    {...field}
                    placeholder={t('addOrgWizard.step2.needsQuantityPlaceholder')}
                  />
                )}
              </FormField>
            </div>
            <FormField
              control={control}
              errors={errors}
              name={`offers.${index}.description`}
              label={t('addOrgWizard.step2.needsDescription')}
            >
              {(field) => (
                <Input
                  {...field}
                  placeholder={t('addOrgWizard.step2.needsDescriptionPlaceholder')}
                />
              )}
            </FormField>
          </div>
        )}
      </DynamicFieldArray>
    </div>
  );
};

export default Step2;