import React from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
import '../styles/components/codeBlock.css';

interface CodeBlockProps {
    language?: string;
    code: string;
}

const CodeBlock: React.FC<CodeBlockProps> = ({ language, code }) => (
    <div className="code-block-container">
        <div className="code-block-header">
            <div className="window-controls">
                <div className="control-dot red"></div>
                <div className="control-dot yellow"></div>
                <div className="control-dot green"></div>
            </div>
            <span className="language-label">
                {language || 'text'}
            </span>
        </div>

        <SyntaxHighlighter
            language={language || 'text'}
            style={vscDarkPlus}
            customStyle={{
                margin: 0,
                borderRadius: '0 0 12px 12px',
                fontSize: '14px',
                background: 'transparent',
                padding: '20px'
            }}
        >
            {code}
        </SyntaxHighlighter>
    </div>
);

export default CodeBlock;
