import { FC } from 'react';
import { useNavigate } from 'react-router-dom';

import { IconChevronRight, IconUsersGroup } from '@material-hu/icons/tabler';
import Stack from '@material-hu/mui/Stack';
import { useTheme } from '@material-hu/mui/styles';
import Typography from '@material-hu/mui/Typography';

import HuAvatar from '@material-hu/components/design-system/Avatar';
import Button from '@material-hu/components/design-system/Buttons/Button';

import { conversationsRoutes } from 'src/pages/dashboard/Conversations/routes';
import { useLokaliseTranslation } from 'src/utils/i18n';

const ButtonNewGroup: FC = () => {
  const theme = useTheme();
  const { t } = useLokaliseTranslation('chat');
  const navigate = useNavigate();
  const handleOnClick = () => navigate(conversationsRoutes.new.group());

  return (
    <Button
      sx={{
        mx: 2,
        justifyContent: 'space-between',
        px: 2.7,
        py: 2,
        minHeight: 76,
      }}
      variant="secondary"
      onClick={handleOnClick}
      startIcon={
        <Stack
          sx={{
            gap: 1,
            flexDirection: 'row',
            width: '100%',
            alignItems: 'center',
          }}
        >
          <HuAvatar Icon={IconUsersGroup} />
          <Typography
            variant="globalS"
            fontWeight={'fontWeightSemiBold'}
          >
            {t('groups.new_group')}
          </Typography>
        </Stack>
      }
      endIcon={
        <IconChevronRight color={theme.palette.new.text.neutral.default} />
      }
    />
  );
};
export default ButtonNewGroup;