"use client";

import { useToast } from "@/common/use-toast";
import copy from "clipboard-copy";
import { ReactElement } from "react";

type CopyButtonProps = {
  content: string;
  children: React.ReactNode;
};

/**
 * A button that copies the content to the clipboard
 *
 * @param props the properties for the button
 * @returns the copy button
 */
export function CopyButton({ content, children }: CopyButtonProps): ReactElement {
  const { toast } = useToast();

  return (
    <button
      onClick={async () => {
        await copy(content);
        toast({
          title: "Copied!",
          description: `Copied "${content}" to the clipboard.`,
          duration: 5000,
        });
      }}
    >
      {children}
    </button>
  );
}