import React from "react";
import { NodeViewWrapper, NodeViewContent } from "@tiptap/react";

const CodeBlockComponent = ({ node, updateAttributes, extension }) => {
  return (
    <NodeViewWrapper className="code-block-wrapper relative bg-[#0d1117] rounded-md overflow-hidden mb-[0.65em]">
      <div className="code-block-header flex justify-between items-center px-4 py-2 bg-[#161b22] border border-[#30363d] border-b-0 rounded-t-md text-xs font-mono">
        <select
          contentEditable={false}
          value={node.attrs.language || "text"}
          onChange={(event) =>
            updateAttributes({ language: event.target.value })
          }
          className="bg-transparent text-[#8b949e] border-none outline-none focus:ring-0 uppercase tracking-wider cursor-pointer"
        >
          <option value="text">text</option>
          <option value="javascript">javascript</option>
          <option value="typescript">typescript</option>
          <option value="html">html</option>
          <option value="css">css</option>
          <option value="json">json</option>
          <option value="bash">bash</option>
          <option value="python">python</option>
          <option value="sql">sql</option>
        </select>
      </div>
      <pre className="!mt-0 !rounded-t-none !bg-transparent !border-[#30363d] !p-4 !text-[#e6edf3]">
        <NodeViewContent as="code" />
      </pre>
    </NodeViewWrapper>
  );
};

export default CodeBlockComponent;