"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 Caption from "@/components/TempDesignSystem/Text/Caption"
import Title from "@/components/TempDesignSystem/Text/Title"
import { toast } from "@/components/TempDesignSystem/Toasts"

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

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

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

export default function Campaign({ reward }: { reward: RewardWithRedeem }) {
  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>
        <div className={styles.rewardBadge}>
          <Caption textAlign="center" color="uiTextHighContrast" type="bold">
            {intl.formatMessage({ id: "Promo code" })}
          </Caption>
          <Caption textAlign="center" color="uiTextHighContrast">
            {reward.operaRewardId}
          </Caption>
        </div>
      </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>
    </>
  )
}
