import { type FC } from 'react';
import { Helmet } from 'react-helmet-async';

import useNewTheme from 'src/hooks/useNewTheme';
import { formatTitle } from 'src/utils/helmetUtils';
import { useLokaliseTranslation } from 'src/utils/i18n';

import useCreatePosition from './hooks/useCreatePosition';
import PositionForm from './PositionForm';

export const NewPosition: FC = () => {
  const { t } = useLokaliseTranslation('settings');
  const NewThemeProvider = useNewTheme();

  const createMutation = useCreatePosition();

  return (
    <NewThemeProvider>
      <Helmet>
        <title>{formatTitle(t('GENERAL.POSITIONS_TAB.NEW_POSITION'))}</title>
      </Helmet>
      <PositionForm
        title={t('GENERAL.POSITIONS_TAB.NEW_POSITION')}
        submitLabel={t('GENERAL.POSITIONS_TAB.CREATE_POSITION')}
        onSubmit={createMutation.mutate}
        submitLoading={createMutation.isLoading}
      />
    </NewThemeProvider>
  );
};

export default NewPosition;