import Stack from '@material-hu/mui/Stack';
import { type SxProps, type Theme } from '@material-hu/mui/styles';

import { parseTokenizedText } from './utils';

/** Props for the shared tokenized paragraph (subtitle / description). */
type CertificateTokenizedTextProps = {
  /** Raw text that may contain `{variable}` tokens rendered in bold. */
  text: string;
  /** Styles for the paragraph element. */
  sx: SxProps<Theme>;
};

const CertificateTokenizedText = ({
  text,
  sx,
}: CertificateTokenizedTextProps) => {
  if (!text) return null;

  return (
    <Stack
      component="p"
      sx={sx}
    >
      {parseTokenizedText(text).map((part, i) =>
        part.isBold ? <strong key={i}>{part.text}</strong> : part.text,
      )}
    </Stack>
  );
};

export default CertificateTokenizedText;
