import { type FC } from 'react';

import Stack from '@material-hu/mui/Stack';

import HuTitle from '@material-hu/components/design-system/Title';

import useRules from 'src/hooks/useRules';
import { useLokaliseTranslation } from 'src/utils/i18n';

import LivestreamLocationForm from './LivestreamLocationForm';
import PresencialLocationForm from './PresencialLocationForm';
import { RemoteLocationForm } from './RemoteLocationForm';

export const LocationStep: FC = () => {
  const { t } = useLokaliseTranslation('events');
  const requiredRules = useRules({
    requiredWithMessage: true,
  });

  return (
    <Stack>
      <HuTitle
        title={t('DEFINE_EVENT_LOCATION')}
        variant="M"
      />
      <Stack sx={{ gap: 1 }}>
        <LivestreamLocationForm />
        <RemoteLocationForm requiredRules={requiredRules} />
        <PresencialLocationForm requiredRules={requiredRules} />
      </Stack>
    </Stack>
  );
};

export default LocationStep;