import { type FC } from 'react';
import { useTranslation } from 'react-i18next';

import { Stack, Typography } from '@mui/material';

import Badge from '../../../Badge';
import Pills from '../../../Pills';
import { type NavButtonContentProps } from '../../types';

const NavButtonContent: FC<NavButtonContentProps> = props => {
  const { active, icon, title, info, children } = props;
  const { t } = useTranslation('material_hu_only');
  return (
    <>
      {icon && <Stack sx={{ width: 24, height: 24 }}>{icon}</Stack>}
      <Stack
        sx={{
          flexGrow: 1,
          overflow: 'hidden',
        }}
      >
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
          sx={{
            overflow: 'hidden',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            color: theme =>
              active
                ? theme.palette.new.text.neutral.default
                : theme.palette.new.text.neutral.lighter,
          }}
        >
          {title}
        </Typography>
      </Stack>
      {(info?.isNew || info?.customPill || !!info?.notificationCount) && (
        <Stack sx={{ flexDirection: 'row', alignItems: 'center', gap: 1 }}>
          {!!info?.notificationCount && (
            <Badge
              badgeContent={info?.notificationCount}
              color="primary"
              sx={{
                ml: 1,
                mr: info?.isNew || info?.customPill ? 1 : 1.25,
              }}
            />
          )}
          {(info?.isNew || info?.customPill) && (
            <Pills
              label={t('sidebar.new')}
              type="success"
              hasIcon={false}
              size="small"
              {...info?.customPill}
            />
          )}
        </Stack>
      )}
      {children}
    </>
  );
};

export type { NavButtonContentProps };

export default NavButtonContent;
