import React, { useEffect } from "react";

import { useDispatch, useSelector } from "react-redux";

import usePriceInfo from "../../../hooks/usePriceInfo";
import { $L } from "../../../utils/helperMethods";
import css from "./ProductTag.module.less";

export default function ProductTag({ productInfo }) {
  const { todaySpclFlag, freeShippingFlag, priceInfo, rewd } = productInfo;
  const dispatch = useDispatch();
  const { originalPrice, discountedPrice, rewardFlag } =
    usePriceInfo(priceInfo) || {};

  // 기존 금액과 할인 후 금액이 유효한지 확인
  const originalPriceValue = parseFloat(originalPrice?.split(" ")[1]) || 0;
  const discountedPriceValue = parseFloat(discountedPrice?.split(" ")[1]) || 0;

  // 할인율 계산
  const discountPercentage =
    originalPriceValue !== 0
      ? ((originalPriceValue - discountedPriceValue) / originalPriceValue) * 100
      : 0;

  return (
    <div className={css.ProductBadge}>
      {todaySpclFlag === "Y" && (
        <span className={css.specialValue} aria-label="TSV">
          {$L("TSV")}
        </span>
      )}
      {freeShippingFlag === "Y" && (
        <span className={css.freeShipping} aria-label="Free S&H">
          {$L("Free S&H")}
        </span>
      )}
      {discountPercentage >= 10 && (
        <span className={css.bigSale} aria-label="Big Sale">
          {$L("Big Sale")}
        </span>
      )}
    </div>
  );
}
