'use client';

import React from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';

export interface CodeBlockHighlighterProps {
    language: string;
    value: string;
}

/**
 * Island do destaque de sintaxe em blocos de código de comentários.
 *
 * Tem de ficar isolada num chunk próprio: o build `Prism` do react-syntax-highlighter
 * embute o refractor com todas as gramáticas (~746 KB), que de outra forma entra no
 * bundle inicial de todas as rotas. Carregar via `LazyCodeBlockHighlighter`.
 */
export default function CodeBlockHighlighter({ language, value }: CodeBlockHighlighterProps) {
    return (
        <SyntaxHighlighter
            style={vscDarkPlus as unknown as Record<string, React.CSSProperties>}
            language={language}
            PreTag="div"
        >
            {value}
        </SyntaxHighlighter>
    );
}