import React, { FC, ReactNode } from 'react';
import { useRouter } from 'next/router';

import { useTranslation } from 'utils/i18n';

import { SubNavigation as SubNavigationComponent } from '../../components/sub-navigation/SubNavigation';
import { Button } from '../../components/sub-navigation/Button';

interface ISubNavigationProps {
  actions?: ReactNode;
}

export const SubNavigation: FC<ISubNavigationProps> = ({ actions }) => {
  const { t } = useTranslation('cards');
  const router = useRouter();

  return (
    <SubNavigationComponent actions={actions}>
      <Button
        to={`/${router?.query.ssn}/felagakort/kort`}
        active={router?.asPath === `/${router?.query.ssn}/felagakort/kort`}
      >
        {t('subNavigation.cards')}
      </Button>

      <Button
        to={`/${router?.query.ssn}/felagakort/felagar`}
        active={router?.asPath === `/${router?.query.ssn}/felagakort/felagar`}
      >
        {t('subNavigation.users')}
      </Button>
    </SubNavigationComponent>
  );
};