import InfoOutlined from '@material-hu/icons/material/InfoOutlined';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Tooltip from '@material-hu/mui/Tooltip';

type FavDescriptionTitleProps = {
  title: string;
  description: string;
  count: number | undefined;
};

const FavDescriptionTitle = ({
  title,
  description,
  count,
}: FavDescriptionTitleProps) => {
  const posfix = count !== undefined ? ` (${count})` : '';
  const composedTitle = `${title}${posfix}`;

  return (
    <Stack sx={{ alignItems: 'center', flexDirection: 'row', gap: 1 }}>
      <span>{composedTitle}</span>
      <Tooltip
        title={description}
        placement="top"
        arrow
      >
        <IconButton>
          <InfoOutlined fontSize="small" />
        </IconButton>
      </Tooltip>
    </Stack>
  );
};

export default FavDescriptionTitle;
