import { codeToHtml } from "shiki";
import { CopyButton } from "./copy-button";

export async function CodeBlock({
  children,
  title,
  language = "text",
}: {
  children: string;
  title?: string;
  language?: string;
}) {
  const html = await codeToHtml(children, {
    lang: language,
    theme: "github-dark",
  });

  return (
    <div className="rounded-xl overflow-hidden border border-neutral-800 bg-neutral-900/50 my-4">
      {title && (
        <div className="px-4 py-2.5 border-b border-neutral-800 text-xs text-neutral-500 font-mono">
          {title}
        </div>
      )}
      <div className="relative">
        <CopyButton text={children} />
        <div
          className="p-4 overflow-x-auto text-sm leading-relaxed [&_pre]:!bg-transparent [&_code]:!bg-transparent"
          dangerouslySetInnerHTML={{ __html: html }}
        />
      </div>
    </div>
  );
}