"use client"

import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { toast } from "@scandic-hotels/design-system/Toast"

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() {
    try {
      navigator.clipboard.writeText(membershipNumber)
      toast.success(
        intl.formatMessage({
          id: "myPages.membershipIdCopied",
          defaultMessage: "Membership ID copied to clipboard",
        })
      )
    } catch {
      toast.error(
        intl.formatMessage({
          id: "errorMessage.copyFailed",
          defaultMessage: "Failed to copy",
        })
      )
    }
  }

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