import { useState } from "react";
import { Copy, Check } from "lucide-react";

export function CodeBlock({ content }) {
    const [copied, setCopied] = useState(false);

    const code     = content.code ?? "";
    const language = content.language ?? "text";

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

    if (!code) {
        return (
            <div className="rounded-lg border border-dashed bg-muted/20 p-4 text-xs text-muted-foreground italic">
                Empty code block
            </div>
        );
    }

    return (
        <div className="rounded-lg overflow-hidden border border-zinc-700 dark:border-zinc-600 bg-zinc-950 text-zinc-100 my-2">
            {/* ── Header bar ── */}
            <div className="flex items-center justify-between px-4 py-2 bg-zinc-900 border-b border-zinc-700">
                <span className="text-[11px] font-mono text-zinc-400 uppercase tracking-widest select-none">
                    {language}
                </span>
                <button
                    onClick={handleCopy}
                    className="flex items-center gap-1.5 text-xs text-zinc-400 hover:text-zinc-100 transition-colors"
                >
                    {copied
                        ? <Check className="size-3.5 text-emerald-400" />
                        : <Copy className="size-3.5" />
                    }
                    <span>{copied ? "Copied!" : "Copy"}</span>
                </button>
            </div>

            {/* ── Code area ── */}
            <pre className="overflow-x-auto p-4 text-sm leading-relaxed" style={{ margin: 0, background: "transparent" }}>
                <code className="font-mono whitespace-pre">{code}</code>
            </pre>
        </div>
    );
}