"use client";

import { useState } from "react";

export function CodeCopy({ code, lang = "jsx" }: { code: string; lang?: string }) {
  const [copied, setCopied] = useState(false);

  return (
    <div style={{ borderRadius: 8, overflow: "hidden", border: "1px solid var(--bb-border)" }}>
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          background: "var(--bb-sidebar-bg)",
          padding: "6px 12px",
          borderBottom: "1px solid var(--bb-border)",
        }}
      >
        <span style={{ fontSize: 11, color: "var(--bb-text-muted)", fontFamily: "var(--font-mono)" }}>
          {lang}
        </span>
        <button
          onClick={() => {
            navigator.clipboard.writeText(code);
            setCopied(true);
            setTimeout(() => setCopied(false), 2000);
          }}
          style={{
            fontSize: 12,
            background: copied ? "#d1fae5" : "var(--brand-053m)",
            color: copied ? "#065f46" : "#fff",
            border: "none",
            borderRadius: 4,
            padding: "3px 10px",
            cursor: "pointer",
            fontWeight: 500,
            fontFamily: "var(--font-web)",
          }}
        >
          {copied ? "✓ Скопировано" : "Скопировать"}
        </button>
      </div>
      <pre
        style={{
          margin: 0,
          padding: "12px 16px",
          overflowX: "auto",
          fontSize: 12,
          fontFamily: "var(--font-mono)",
          color: "var(--bb-text-muted)",
          background: "#fff",
          lineHeight: 1.6,
        }}
      >
        <code>{code}</code>
      </pre>
    </div>
  );
}