"use client";

import { Check, Copy } from "@openstatus/icons";
import { Button } from "@openstatus/ui/components/ui/button";
import { useCopyToClipboard } from "@openstatus/ui/hooks/use-copy-to-clipboard";
import { cn } from "@openstatus/ui/lib/utils";

export function Code({
  children,
  className,
  ...props
}: React.ComponentProps<"pre">) {
  const { copy, isCopied } = useCopyToClipboard();

  return (
    <div className="relative">
      <pre
        className={cn(
          "bg-muted overflow-x-auto rounded-md border p-2 text-xs",
          className,
        )}
        {...props}
      >
        {children}
      </pre>
      <Button
        variant="outline"
        size="icon"
        className="absolute top-1 right-1 size-6 p-1 backdrop-blur-md"
        onClick={() =>
          copy(children?.toString() ?? "", {
            withToast: false,
            timeout: 1000,
          })
        }
      >
        {isCopied ? <Check className="size-3" /> : <Copy className="size-3" />}
      </Button>
    </div>
  );
}