'use strict';

var react = require('react');
var react$1 = require('@emotion/react');
var core = require('@timeui/core');
var jsxRuntime = require('@emotion/react/jsx-runtime');

// src/CodeBlock/CodeBlock.tsx
var CodeBlock = react.forwardRef(function CodeBlock2({ code, language = "tsx", title, isCopyable = true, disableHighlight = false, onCopy, ...rest }, ref) {
  const theme = react$1.useTheme();
  const i18n = core.useI18n();
  const [copied, setCopied] = react.useState(false);
  const [highlightedHtml, setHighlightedHtml] = react.useState(null);
  react.useEffect(() => {
    if (disableHighlight) {
      setHighlightedHtml(null);
      return;
    }
    let cancelled = false;
    (async () => {
      try {
        const shiki = await import('shiki');
        const highlighter = await shiki.getSingletonHighlighter({
          themes: ["github-light", "github-dark"],
          langs: [language]
        });
        const loaded = highlighter.getLoadedLanguages();
        if (!loaded.includes(language)) {
          await highlighter.loadLanguage(language);
        }
        const html = highlighter.codeToHtml(code, {
          lang: language,
          themes: { light: "github-light", dark: "github-dark" },
          defaultColor: theme.mode === "dark" ? "dark" : "light"
        });
        if (!cancelled) setHighlightedHtml(html);
      } catch (err) {
        if (process.env.NODE_ENV !== "production") {
          console.warn(
            "[TimeUI] CodeBlock: syntax highlighting unavailable \u2014 falling back to plain text.",
            err
          );
        }
        if (!cancelled) setHighlightedHtml(null);
      }
    })();
    return () => {
      cancelled = true;
    };
  }, [code, language, theme.mode, disableHighlight]);
  const handleCopy = react.useCallback(async () => {
    try {
      await navigator.clipboard.writeText(code);
      setCopied(true);
      onCopy?.(code);
      window.setTimeout(() => setCopied(false), 1500);
    } catch {
    }
  }, [code, onCopy]);
  const bg = theme.colors.bg.sunken;
  const fg = theme.colors.text.primary;
  const border = theme.colors.border.subtle;
  const fastDuration = theme.motion.duration.fast;
  const monoFont = theme.typography.fontFamily.mono;
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      ref,
      ...rest,
      css: react$1.css`
        position: relative;
        margin: 16px 0;
        border-radius: 10px;
        border: 1px solid ${border};
        overflow: hidden;
        background: ${bg};
        font-family: ${monoFont};

        .shiki {
          margin: 0 !important;
          padding: 16px ${isCopyable ? 56 : 16}px 16px 16px;
          font-size: 13px !important;
          line-height: 1.7 !important;
          font-family: inherit !important;
          background: transparent !important;
          overflow: auto;
        }
        .shiki code {
          font-family: inherit;
        }
      `,
      children: [
        title && /* @__PURE__ */ jsxRuntime.jsxs(
          "div",
          {
            css: react$1.css`
            padding: 8px 14px;
            border-bottom: 1px solid ${border};
            font-size: 11px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: ${theme.colors.text.muted};
            display: flex;
            justify-content: space-between;
            align-items: center;
          `,
            children: [
              /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }),
              /* @__PURE__ */ jsxRuntime.jsx("span", { children: language })
            ]
          }
        ),
        highlightedHtml ? /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: highlightedHtml } }) : /* @__PURE__ */ jsxRuntime.jsx(
          "pre",
          {
            css: react$1.css`
            margin: 0;
            padding: 16px ${isCopyable ? 56 : 16}px 16px 16px;
            font-size: 13px;
            line-height: 1.7;
            color: ${fg};
            overflow: auto;
            font-family: inherit;
          `,
            children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code })
          }
        ),
        isCopyable && /* @__PURE__ */ jsxRuntime.jsx(
          "button",
          {
            type: "button",
            onClick: handleCopy,
            "aria-label": i18n.codeBlock.copyLabel,
            "data-copied": copied || void 0,
            css: react$1.css`
            position: absolute;
            top: ${title ? 44 : 10}px;
            right: 10px;
            padding: 4px 10px;
            font-family: inherit;
            font-size: 10px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: ${theme.colors.text.muted};
            background: transparent;
            border: 1px solid ${border};
            border-radius: 6px;
            cursor: pointer;
            transition:
              background ${fastDuration},
              color ${fastDuration},
              border-color ${fastDuration};
            @media (prefers-reduced-motion: reduce) {
              transition: none;
            }
            &:hover,
            &:focus-visible {
              background: ${theme.colors.bg.muted};
              color: ${theme.colors.text.primary};
              outline: none;
            }
            &:focus-visible {
              border-color: ${theme.colors.focus};
            }
          `,
            children: copied ? i18n.codeBlock.copied : i18n.codeBlock.copy
          }
        )
      ]
    }
  );
});
CodeBlock.displayName = "CodeBlock";

exports.CodeBlock = CodeBlock;
//# sourceMappingURL=code-block.cjs.map
//# sourceMappingURL=code-block.cjs.map