import { ButtonBase } from "@mui/material";
import { PropsWithChildren } from "react";
import { useSnackbar } from "../hooks/providers/SnackbarProvider";

export function CopyToClipboard(
  p: PropsWithChildren<{ content: string }>
): React.ReactElement {
  const snackbar = useSnackbar();

  const copy = () => {
    navigator.clipboard.writeText(p.content);
    snackbar(`${p.content} copied to clipboard.`);
  };

  return (
    <ButtonBase
      onClick={copy}
      style={{
        display: "inline-block",
        alignItems: "unset",
        textAlign: "unset",
        position: "relative",
        padding: "0px",
      }}
      disableRipple
    >
      {p.children}
    </ButtonBase>
  );
}