// Adapted from Kibo UI (MIT), with owned React/CSS APIs. See THIRD_PARTY_NOTICES.md.
"use client";
import { useEffect, useState, type ComponentProps } from "react";
import { codeToTokens, type BundledLanguage } from "./_ynrlib/shiki.js";
export type CodeBlockProps = ComponentProps<"div"> & {
  code: string;
  language?: BundledLanguage | "text";
  lineNumbers?: boolean;
};
export function CodeBlock({
  code,
  language = "text",
  lineNumbers = true,
  className = "",
  ...props
}: CodeBlockProps) {
  const [tokens, setTokens] =
    useState<Awaited<ReturnType<typeof codeToTokens>>["tokens"]>();
  const [notice, setNotice] = useState("");
  useEffect(() => {
    let active = true;
    setTokens(undefined);
    if (language !== "text")
      codeToTokens(code, { lang: language, theme: "github-dark" })
        .then((result) => {
          if (active) setTokens(result.tokens);
        })
        .catch(() => {
          if (active)
            setNotice("Highlighting unavailable; showing plain text.");
        });
    return () => {
      active = false;
    };
  }, [code, language]);
  return (
    <div className={`ynr-code-block ${className}`} {...props}>
      <div className="ynr-code-block-header">
        <span>{language}</span>
        <button
          type="button"
          onClick={async () => {
            try {
              await navigator.clipboard.writeText(code);
              setNotice("Copied");
            } catch {
              setNotice("Copy unavailable. Select the code to copy.");
            }
          }}
        >
          Copy code
        </button>
      </div>
      <pre>
        <code>
          {code.split("\n").map((line, i) => (
            <span className="ynr-code-line" key={i}>
              {lineNumbers && (
                <span aria-hidden="true" className="ynr-code-number">
                  {i + 1}
                </span>
              )}
              {tokens?.[i]
                ? tokens[i].map((token, j) => (
                    <span key={j} style={{ color: token.color }}>
                      {token.content}
                    </span>
                  ))
                : line}
              {"\n"}
            </span>
          ))}
        </code>
      </pre>
      <span role="status">{notice}</span>
    </div>
  );
}