/**
 * EN: Code block with syntax highlighting and copy-to-clipboard
 * VI: Code block với syntax highlighting và copy-to-clipboard
 *
 * Displays formatted code with copy functionality
 * Hiển thị code đã format với tính năng copy
 */
'use client';

import { useState } from 'react';

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

export default function CodeBlock({ code, language }: CodeBlockProps) {
    const [copied, setCopied] = useState(false);

    const handleCopy = async () => {
        await navigator.clipboard.writeText(code);
        setCopied(true);
        setTimeout(() => setCopied(false), 2000);
    };

    return (
        <div className="relative">
            {/* EN: Copy Button / VI: Nút copy */}
            <button
                onClick={handleCopy}
                className="absolute top-2 right-2 glass-button text-xs px-3 py-1.5"
            >
                {copied ? '✓ Copied!' : 'Copy'}
            </button>

            {/* EN: Code Display / VI: Hiển thị code */}
            <pre className="bg-bg-tertiary rounded-lg p-4 overflow-x-auto">
                <code className="text-sm text-text-primary font-mono">{code}</code>
            </pre>
        </div>
    );
}
