import React, {useMemo} from 'react';
import {View, useWindowDimensions} from 'react-native';
import {SPACING} from '@shared/theme';

import {MarkdownBlockView} from './components/MarkdownBlockView';
import {styles} from './styles';
import {parseMarkdownBlocks} from './utils';

interface Props {
  content: string;
}

export function MarkdownContent({content}: Props) {
  const {width: windowWidth} = useWindowDimensions();
  const availableWidth = windowWidth - SPACING.x4 * 2;

  const blocks = useMemo(() => parseMarkdownBlocks(content), [content]);

  return (
    <View style={styles.container}>
      {blocks.map((block, index) => (
        <MarkdownBlockView
          key={index}
          block={block}
          availableWidth={availableWidth}
        />
      ))}
    </View>
  );
}