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

import { Button, Icon, IconName, Typography } from "@/components/ui";
import { IRefillModalsProduct } from "@/services/socket/events";
import { getFormattedPrice } from "@/shared/utils/price";

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

interface RefillOptionProps {
  product: IRefillModalsProduct;
  selected?: boolean;
  popular?: boolean;
  onClick?: () => void;
  className?: string;
}

export default function RefillOption({
  product,
  selected = false,
  popular = false,
  onClick,
  className,
}: RefillOptionProps) {
  const t = useTranslations("RefillOptionsModal.refill_option");
  const { credits, price, bonus, currency } = product;

  return (
    <Button
      type="button"
      className={clsx(styles.option, selected && styles.selected, className)}
      onClick={onClick}
      aria-pressed={selected}
    >
      {popular && (
        <div className={styles.popularBadge}>
          <Typography weight="bold" size="xs" color="white">
            {t("popular")}
          </Typography>
        </div>
      )}
      <Icon
        name={IconName.Check}
        size={{ height: 16, width: 16 }}
        color="#fff"
        className={clsx(styles.checkIcon, selected && styles.selected)}
      />
      <Typography weight="bold" className={styles.credits}>
        {credits}
      </Typography>
      {bonus && bonus > 0 && (
        <Typography as="p" size="sm" color="white" className={styles.bonus}>
          {t.rich("bonus", {
            bonus: () => (
              <Typography weight="bold" color="white">
                {bonus}
              </Typography>
            ),
            br: () => <br />,
          })}
        </Typography>
      )}
      <Typography size="sm" weight="medium" className={styles.price}>
        {getFormattedPrice(price, currency)}
      </Typography>
    </Button>
  );
}
