import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { ButtonText } from 'src/pages/dashboard/feed/components/ButtonText';
import { useLokaliseTranslation } from 'src/utils/i18n';

type SidebarGroupsHeaderProps = {
  title: string;
  goToGroupsMainPage: () => void;
};

const SidebarGroupsHeader = ({
  title,
  goToGroupsMainPage,
}: SidebarGroupsHeaderProps) => {
  const { t } = useLokaliseTranslation('group');
  return (
    <Stack
      sx={{
        my: 1,
        flexDirection: 'row',
        alignItems: 'baseline',
        justifyContent: 'space-between',
      }}
    >
      <Typography
        variant="globalM"
        fontWeight="fontWeightSemiBold"
      >
        {title}
      </Typography>
      <ButtonText onClick={goToGroupsMainPage}>{t('manage')}</ButtonText>
    </Stack>
  );
};

export default SidebarGroupsHeader;
