import React from 'react';
import {Typography, TypographyProps} from '@components/_core/Typography';

import {styles} from '../../styles';

interface Props {
  text: string;
  color?: string;
  weight?: TypographyProps['weight'];
}

export function InlineText({text, color, weight = 'regular'}: Props) {
  const parts = text.split(/(\*\*[^*]+\*\*|\*[^*]+\*)/g);
  return (
    <Typography
      variant="xs"
      color={color}
      weight={weight}
      style={styles.lineHeight}>
      {parts.map((part, i) => {
        if (part.startsWith('**') && part.endsWith('**')) {
          return (
            <Typography key={i} variant="xs" weight="semiBold" color={color}>
              {part.slice(2, -2)}
            </Typography>
          );
        }
        if (part.startsWith('*') && part.endsWith('*')) {
          return (
            <Typography
              key={i}
              variant="xs"
              color={color}
              weight={weight}
              style={styles.italic}>
              {part.slice(1, -1)}
            </Typography>
          );
        }
        return part;
      })}
    </Typography>
  );
}
