import { useState } from "react";

export function CodeBlock({
  code,
  language = "text",
}: {
  code: string;
  language?: string;
}) {
  const [status, setStatus] = useState("复制");
  async function copy() {
    try {
      await navigator.clipboard.writeText(code);
      setStatus("已复制");
    } catch {
      setStatus("复制失败，请手动选择");
    }
    setTimeout(() => setStatus("复制"), 2400);
  }
  return (
    <div className="code-block">
      <div className="code-toolbar">
        <span>{language === "sh" ? "Terminal" : language}</span>
        <button onClick={copy} aria-label="复制代码">
          {status}
        </button>
        <span className="sr-only" role="status">
          {status === "复制" ? "" : status}
        </span>
      </div>
      <pre>
        <code>
          {code
            .replace(/\n$/, "")
            .split("\n")
            .map((line, i) => (
              <span className="code-line" key={i}>
                <span className="line-number" aria-hidden="true">
                  {i + 1}
                </span>
                <span>
                  {/^(pnpm|uv)\b/.test(line) ? (
                    <>
                      <span className="code-command">{line.split(" ")[0]}</span>
                      {line.slice(line.indexOf(" "))}
                    </>
                  ) : (
                    line || "\u00a0"
                  )}
                </span>
              </span>
            ))}
        </code>
      </pre>
    </div>
  );
}