/**
 * Location Section for Organization Creation
 * Handles location/map selection and coordinates
 * Separated from main Step1 component for better SRP
 */

import React from 'react';
import { Control, FieldErrors, UseFormWatch, UseFormSetValue } from 'react-hook-form';
import { OrganizationFormData } from '@/types.ts';
import { useTranslation } from '@/hooks/useI18n.tsx';
import FormField from '@/components/form/FormField.tsx';
import Input from '@/components/ui/Input.tsx';
import MapPicker from '@/components/ui/MapPicker.tsx';

interface LocationSectionProps {
  control: Control<OrganizationFormData>;
  errors: FieldErrors<OrganizationFormData>;
  watch: UseFormWatch<OrganizationFormData>;
  setValue: UseFormSetValue<OrganizationFormData>;
}

export const LocationSection: React.FC<LocationSectionProps> = ({
  control,
  errors,
  watch,
  setValue,
}) => {
  const { t } = useTranslation();

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <FormField
          control={control}
          errors={errors}
          name="location.lat"
          label={t('addOrgWizard.step1.latitude')}
          component={Input}
          type="number"
          step="any"
          placeholder={t('addOrgWizard.step1.latitudePlaceholder')}
          required
        />
        <FormField
          control={control}
          errors={errors}
          name="location.lng"
          label={t('addOrgWizard.step1.longitude')}
          component={Input}
          type="number"
          step="any"
          placeholder={t('addOrgWizard.step1.longitudePlaceholder')}
          required
        />
      </div>

      <FormField
        control={control}
        errors={errors}
        name="location"
        label={t('addOrgWizard.step1.location')}
        component={MapPicker}
        setValue={setValue}
        watch={watch}
        required
      />
    </div>
  );
};