import React from 'react';
import { Box, Grid, GridItem, MainButton, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { inject } from 'mobx-react';
import Link from 'next/link';
import Authentication from 'store/authentication';
import { useTranslation } from 'utils/i18n';

interface ITransfareSettingsProps {
  subscriptionId: string;
  color: MainColorType;
  authentication: Authentication;
}

const TransfareSettings = ({
  authentication: { accountInput },
  subscriptionId,
  color,
}: ITransfareSettingsProps) => {
  const { t } = useTranslation('stillingar');

  return (
    <Box padding={4} marginX={{ sm: 0, md: 5 }} marginBottom={4}>
      <Grid rowGap={4} columnGap={4}>
        <GridItem gridColumn={{ sm: '1/12' }}>
          <Text color="black100" variant="pMediumRegular">
            {t('relocation.subtitle')}
          </Text>
        </GridItem>
        <GridItem gridColumn={{ sm: '1/12', md: '1/6' }}>
          <MainButton
            text={t('relocation.registerRelocation')}
            colorScheme={color}
            icon="arrowsLeftRight"
            renderAs="a"
            wrapper={(link) => (
              <Link
                href={`/${accountInput.ssn}/thjonusta/${subscriptionId}/flutningur`}
                passHref
                legacyBehavior
              >
                {link}
              </Link>
            )}
          />
        </GridItem>
      </Grid>
    </Box>
  );
};

export default inject('authentication')(TransfareSettings);