"use client";

import { Check, Copy } from "lucide-react";
import { useState } from "react";

export function Code({ children, lang = "bash" }: { children: string; lang?: string }) {
  const [done, setDone] = useState(false);
  return (
    <div className="relative">
      <pre className="overflow-x-auto rounded-md border border-line bg-panel-2 p-3 pr-10 font-mono text-[12px] leading-5" data-lang={lang}>
        {children}
      </pre>
      <button
        type="button"
        aria-label="Copy"
        onClick={async () => {
          await navigator.clipboard.writeText(children).catch(() => undefined);
          setDone(true);
          setTimeout(() => setDone(false), 1200);
        }}
        className="absolute right-2 top-2 rounded border border-line bg-panel p-1 text-fg-subtle hover:text-fg"
      >
        {done ? <Check className="size-3.5 text-signal" /> : <Copy className="size-3.5" />}
      </button>
    </div>
  );
}