import { Product } from "@/interfaces/types";
import { useTranslations } from "next-intl";

interface Props{
  product: Product;
  isSmall?: boolean;
  className?: string;
}
const Price = ({ product ,isSmall,className }: Props) => {
    const formatCurrencyPart = (value:any) => value.toFixed(2).slice(-3);
    const t = useTranslations();
    if(isSmall){
      return (
          <div className={`flex items-center gap-1 sm:gap-2`}>
            <span className=" font-bold text-[10px] sm:text-sm  leading-5  text-start">
              {product?.price_after_discount || product?.price || product?.unit_price} <strong className="text-xs leading-none">{t("Text.IQ")}</strong> 
            </span>
            {product?.price_after_discount ? (
              <span className="text-[10px]  font-bold  leading-5 text-start text-gray-400 line-through">
                {product?.price} {t("Text.IQ")}
              </span>
            ):""}
          </div>
      )
    }
  
    return (
      <div className={`flex items-center gap-2 text-2xl product-price-wrap ${className ? className:""}`} >
        {product.price_after_discount && (
          <div className="price-style gap-1  flex font-bold text-2xl items-end after-price">
            {Math.floor(product.price_after_discount)}
            {formatCurrencyPart(product.price_after_discount)}
            <span className="ml-1 text-sm">{t("Text.IQ")}</span>
          </div>
        )}
        <div className={`price-style  gap-1 flex items-end ${product.price_after_discount ? ' text-base line-through text-gray-400' : ' font-bold text-2xl'}`}>
          {Math.floor(product.price )}
          {formatCurrencyPart(product.price)}
          <span className="text-xl">{t("Text.IQ")}</span>
        </div>
        {/* {product?.discount && (
          <div className="text-[#04BD5E] font-semibold text-base">{product?.discount}</div>
        )} */}
      </div>
    );
  };

  export default Price