"use client"

import { useIntl } from "react-intl"

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

import { RewardIcon } from "../RewardIcon"
import MembershipNumberBadge from "./MembershipNumberBadge"

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

import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"

export default function Campaign({
  reward,
  membershipNumber,
}: {
  reward: RewardWithRedeem
  membershipNumber: string
}) {
  const intl = useIntl()

  function handleCopy() {
    navigator.clipboard.writeText(reward.operaRewardId)
    toast.success(intl.formatMessage({ id: "Copied to clipboard" }))
  }

  return (
    <>
      <div className={styles.modalContent}>
        <RewardIcon rewardId={reward.reward_id} />
        <Title level="h3" textAlign="center" textTransform="regular">
          {reward.label}
        </Title>
        <Body textAlign="center">{reward.description}</Body>
        {membershipNumber && (
          <MembershipNumberBadge membershipNumber={membershipNumber} />
        )}
      </div>
      <footer className={styles.modalFooter}>
        <Button
          onClick={handleCopy}
          type="button"
          variant="icon"
          size="small"
          theme="base"
          intent="primary"
        >
          {reward.operaRewardId}
          <CopyIcon color="pale" />
        </Button>
      </footer>
    </>
  )
}
