import hljs from "highlight.js";
import { createResource, For } from "solid-js";
import "../styles/fileviewer.css";
import "../util/highlight.js/index";

export function CodeBlock(props: { code: string; language: string }) {
	const [codeBlock] = createResource(
		() => props,
		(props) => {
			const highlit = hljs.getLanguage(props.language)
				? hljs.highlight(props.code, { language: props.language }).value
				: props.code;
			return (
				<For each={highlit.split("\n")}>
					{(line, i) => (
						<span class="line-wrapper">
							<span class="line-number">{i() + 1}</span>
							<span class="line-content" innerHTML={line}></span>
						</span>
					)}
				</For>
			);
		},
	);

	return (
		<pre>
			<code class="flex flex-col text-wrap p-4">{codeBlock()}</code>
		</pre>
	);
}