import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
import { Typography } from '@mui/material';

import { equals, type } from 'ramda';
import type { ReactNode } from 'react';
import { useTranslation } from 'react-i18next';

import { Tooltip } from '../components';

interface Props {
  children: ReactNode;
  secondaryLabel?: string | Array<string>;
}

const Subtitle = ({ children, secondaryLabel }: Props): JSX.Element => {
  const { t } = useTranslation();

  const containsSeveralSecondaryLabels = equals(type(secondaryLabel), 'Array');

  return (
    <Typography variant="subtitle1">
      <strong>{children}</strong>
      {secondaryLabel && (
        <Tooltip
          aria-label={
            containsSeveralSecondaryLabels
              ? secondaryLabel[0]
              : (secondaryLabel as string)
          }
          followCursor={false}
          label={
            containsSeveralSecondaryLabels
              ? (secondaryLabel as Array<string>).map((label) => (
                  <p key={label}>{t(label)}</p>
                ))
              : t(secondaryLabel)
          }
          placement="right"
        >
          <HelpOutlineIcon
            color="primary"
            sx={{ ml: 1, verticalAlign: 'middle' }}
          />
        </Tooltip>
      )}
    </Typography>
  );
};

export default Subtitle;