"use client"

import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons"

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 { Campaign } from "@/types/components/myPages/rewards"

export default function Campaign({ reward }: { reward: Campaign }) {
  const intl = useIntl()

  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={() => {
            try {
              navigator.clipboard.writeText(reward.operaRewardId)
              toast.success(intl.formatMessage({ id: "Copied to clipboard" }))
            } catch {
              toast.error(intl.formatMessage({ id: "Failed to copy" }))
            }
          }}
          type="button"
          variant="icon"
          size="small"
          theme="base"
          intent="primary"
        >
          <MaterialIcon icon="content_copy" color="CurrentColor" />
          {intl.formatMessage({ id: "Copy promotion code" })}
        </Button>
      </footer>
    </>
  )
}
