'use client';

import { useTranslations } from 'next-intl';

import { Control } from 'react-hook-form';

import * as Field from '@/components/forms/Field';
import { CreatorMultiSelect } from '@/components/forms/Field/CreatorMultiSelect';
import { EventFormValues } from '@/lib/schemas/eventSubmitFormSchema';

interface StepCreatorsProps {
  control: Control<EventFormValues>;
}

export default function StepCreators({ control }: StepCreatorsProps) {
  const t = useTranslations('eventSubmit.stepCreators');

  return (
    <div className="grid gap-6">
      <div className="bg-white/70 p-5 sm:p-6">
        <CreatorMultiSelect
          control={control}
          name="selectedCreators"
          creatorObjectsName="selectedCreatorsObjects"
          label={t('creatorsTitle')}
          required
          requiredNote={t('requiredNote')}
          helper={t('creatorsHelper')}
          placeholder={t('creatorsPlaceholder')}
        />
      </div>

      <div className="bg-white/70 p-5 sm:p-6">
        <Field.Input
          control={control}
          name="otherCreators"
          label={t('otherCreatorsTitle')}
          helper={t('otherCreatorsHelper')}
          placeholder={t('otherCreatorsPlaceholder')}
          maxLength={200}
        />
      </div>
    </div>
  );
}