import React, { memo } from "react";
import { useColorScheme, View } from "react-native";
import type { MarkdownProps } from "./types";
import useMarkdown from "../hooks/useMarkdown";

const Markdown = ({
	value,
	theme,
	baseUrl,
	renderer,
	styles,
	tokenizer,
	meta,
}: MarkdownProps) => {
	const colorScheme = useColorScheme();

	const rnElements = useMarkdown(value, {
		theme,
		baseUrl,
		renderer,
		colorScheme,
		styles,
		tokenizer,
		meta,
	});

	return <View style={styles?.container}>{rnElements.map((el) => el)}</View>;
};

export default memo(Markdown);