"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 { RewardIcon } from "../../RewardIcon"

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

import type { Campaign } from "@scandic-hotels/trpc/types/rewards"

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

  return (
    <>
      <div className={styles.modalContent}>
        <RewardIcon rewardId={reward.reward_id} />
        <Typography variant="Title/smLowCase" className={styles.rewardLabel}>
          <h3>{reward.label}</h3>
        </Typography>
        <Typography
          variant="Body/Paragraph/mdRegular"
          className={styles.rewardDescription}
        >
          <p>{reward.description}</p>
        </Typography>
        <div className={styles.rewardBadge}>
          <Typography variant="Body/Supporting text (caption)/smBold">
            <p>
              {intl.formatMessage({
                id: "redeemFlow.promoCode",
                defaultMessage: "Promo code",
              })}
            </p>
          </Typography>
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p>{reward.operaRewardId}</p>
          </Typography>
        </div>
      </div>
      <footer className={styles.modalFooter}>
        <Button
          onPress={() => {
            try {
              navigator.clipboard.writeText(reward.operaRewardId)
              toast.success(
                intl.formatMessage({
                  id: "redeemFlow.copiedToClipboard",
                  defaultMessage: "Copied to clipboard",
                })
              )
            } catch {
              toast.error(
                intl.formatMessage({
                  id: "errorMessage.copyFailed",
                  defaultMessage: "Failed to copy",
                })
              )
            }
          }}
          type="button"
          variant="Primary"
          size="sm"
        >
          <MaterialIcon icon="content_copy" color="CurrentColor" />
          {intl.formatMessage({
            id: "redeemFlow.copyPromotionCode",
            defaultMessage: "Copy promotion code",
          })}
        </Button>
      </footer>
    </>
  )
}