"use client"

import CopyIcon from "@/components/Icons/Copy"
import Button from "@/components/TempDesignSystem/Button"

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

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

export default function CopyButton({ membershipNumber }: CopyButtonProps) {
  function handleCopy() {
    navigator.clipboard.writeText(membershipNumber)
  }

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