"use client"

import { useIntl } from "react-intl"

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

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

interface CopyMembershipIdButtonProps {
  membershipNumber: string
}

export default function CopyMembershipIdButton({
  membershipNumber,
}: CopyMembershipIdButtonProps) {
  const intl = useIntl()

  function handleCopy() {
    try {
      navigator.clipboard.writeText(membershipNumber)
      toast.success(
        intl.formatMessage({
          defaultMessage: "Membership ID copied to clipboard",
        })
      )
    } catch {
      toast.error(
        intl.formatMessage({
          defaultMessage: "Failed to copy",
        })
      )
    }
  }

  return (
    <div className={styles.container}>
      <Typography variant="Body/Supporting text (caption)/smBold">
        <code data-hj-suppress className={styles.membershipCode}>
          {membershipNumber}
        </code>
      </Typography>
      <Button
        onClick={handleCopy}
        className={styles.copyButton}
        variant="Text"
        size="Small"
      >
        <MaterialIcon icon="content_copy" color="CurrentColor" />
      </Button>
    </div>
  )
}