import { useTranslations } from "next-intl";
import clsx from "clsx";

import { Card, Icon, IconName, Typography } from "@/components/ui";
import { IFunnelPaymentVariant } from "@/entities/session/funnel/types";
import { getFormattedPrice } from "@/shared/utils/price";
import { Currency } from "@/types";

import styles from "./VideoGuidesOffer.module.scss";

interface VideoGuidesOfferProps {
  offer: IFunnelPaymentVariant;
  isActive: boolean;
  isFirstOffer?: boolean;
  className?: string;
  onClick: () => void;
}

export default function VideoGuidesOffer(props: VideoGuidesOfferProps) {
  const { offer, isActive, isFirstOffer, className, onClick } = props;

  const { key, name, description, emoji, price, oldPrice } = offer;

  const productKey = key.replaceAll(".", "_");

  const currency = Currency.USD;

  const discount = Math.round(
    (((oldPrice || 0) - price) / (oldPrice || 0)) * 100
  );

  const t = useTranslations("AdditionalPurchases.video-guides");

  return (
    <Card
      className={clsx(
        styles.container,
        isActive && styles.active,
        styles[productKey],
        className
      )}
      onClick={onClick}
    >
      {isFirstOffer && (
        <div className={styles.topBadge}>
          <span className={styles.topBadgeText}>{discount}% OFF</span>
        </div>
      )}
      <div className={styles.content}>
        <div className={styles.emojiContainer}>
          <span
            className={styles.emoji}
            style={{ backgroundImage: `url(/emoji/${emoji})` }}
          />
        </div>
        <div className={styles.textContainer}>
          <Typography as="h5" align="left" className={styles.title}>
            {name}
          </Typography>
          {description && (
            <Typography as="p" align="left" className={styles.subtitle}>
              {description}
            </Typography>
          )}
        </div>
        <div className={styles.checmarkContainer}>
          <Icon
            name={IconName.Check}
            color="white"
            size={{
              width: 11,
              height: 11,
            }}
          />
        </div>
      </div>
      <div className={styles.footer}>
        <Typography className={styles.price}>
          {t("now")}{" "}
          <Typography className={styles.currentPrice}>
            {getFormattedPrice(price, currency)}
          </Typography>
          {"   "}
          <Typography className={styles.oldPrice}>
            {getFormattedPrice(oldPrice || 0, currency)}
          </Typography>
        </Typography>
        {!isFirstOffer && (
          <Typography className={styles.discount}>{discount}% OFF</Typography>
        )}
      </div>
    </Card>
  );
}