import * as React from 'react';
import Router from 'next/router';
import { Button } from '@nova-hf/ui';
import { useTranslation } from 'utils/i18n';

import Settings from '../../containers/settings/Settings';

interface IRegisterProps {
  subscriptionId: string;
  pathname: string;
}

const Register = ({ subscriptionId }: IRegisterProps) => {

  const { t } = useTranslation(['stillingar']);

  return (
    <Settings subscriptionId={subscriptionId}>
      <>
        <h2>{t('register.title')}</h2>
        <p>
          {t('register.description', { phoneNumber: subscriptionId })}
        </p>
        <br />
        <Button
          arrowRight
          onClick={() => Router.push({ pathname: '/skra', query: { subscriptionId } })}
        >
          {t('register.buttonText')}
        </Button>
      </>
    </Settings>
  );
};

Register.getInitialProps = async ({ pathname, query }: any) => {
  return {
    subscriptionId: query?.subscriptionId,
    namespacesRequired: ['stillingar'],
  };
};

export default Register;