"use client"

import { useIntl } from "react-intl"

import CopyIcon from "@/components/Icons/Copy"
import Button from "@/components/TempDesignSystem/Button"
import { toast } from "@/components/TempDesignSystem/Toasts"

import styles from "./copybutton.module.css"

import type { CopyButtonProps } from "@/types/components/myPages/membership"

export default function CopyButton({ membershipNumber }: CopyButtonProps) {
  const intl = useIntl()

  function handleCopy() {
    navigator.clipboard.writeText(membershipNumber)
    toast.success(
      intl.formatMessage({ id: "Membership ID copied to clipboard" })
    )
  }

  return (
    <Button
      onClick={handleCopy}
      className={styles.button}
      type="button"
      variant="icon"
      size="small"
      intent="tertiary"
    >
      <CopyIcon color="pale" />
    </Button>
  )
}