import React from 'react';
import { ContainerDeprecated } from '@nova-hf/ui';
import Wrapper from 'components/app-layout/Wrapper';
import Hero from 'containers/hero/Hero';
import { inject } from 'mobx-react';
import { useTranslation } from 'utils/i18n';
import SEO from 'utils/SEO';

import UI from '../../store/ui';

import VidgerdirContainer from './containers/VidgerdirContainer';

type VidgerdirProps = {
  ui: UI;
};

const Vidgerdir = ({ ui }: VidgerdirProps) => {
  const { t } = useTranslation('common');
  return (
    <Wrapper>
      <SEO title="Viðgerðir" />
      <Hero title={t('Viðgerðir')} color={'green' ?? ui?.pageColor} />
      <ContainerDeprecated underBar withStickyBar row>
        <VidgerdirContainer ui={ui}></VidgerdirContainer>
      </ContainerDeprecated>
    </Wrapper>
  );
};

Vidgerdir.getInitialProps = () => {
  return {
    namespacesRequired: 'common',
  };
};

export default inject('ui')(Vidgerdir);