ESIM/EsimLao/esim-vite/src/components/ProductCard.tsx

import React from "react";

import { SimProduct } from "../services/types";
import { Area } from "../services/product/type";
import { useTranslation } from "react-i18next";
import { formatCurrency, formatNumber } from "../logic/loigicUtils";

const ProductCard: React.FC<{
  p: Area;
  onClick: (p: Area) => void;
}> = ({ p, onClick }) => {
  const { t } = useTranslation();
  return (
    <div
      onClick={() => onClick(p)}
      className="bg-white border border-slate-100 rounded-[20px] p-3 md:p-6 shadow-sm hover:shadow-lg transition-all relative flex flex-col md:flex-row items-center md:space-x-4 space-y-2 md:space-y-0 group cursor-pointer text-center md:text-left"
    >
      {p.promotionPercent !== 0 && (
        <div className="absolute top-0 right-0 bg-[#EE0434] text-white text-[10px] font-black px-2 py-1 md:px-3 md:py-1.5 rounded-tr-[19px] rounded-bl-[14px] absolute-right-18">
          {p.promotionPercent}%
        </div>
      )}
      <div className="w-10 h-10 md:w-12 md:h-12 rounded-full overflow-hidden shrink-0 border border-slate-50 bg-slate-50">
        <img
          src={`${p.iconUrl}`}
          alt={p.areaName1}
          className="w-full h-full object-cover scale-150"
        />
      </div>
      <div className="flex-1 w-full">
        <h3 className="text-slate-900 font-black text-sm md:text-lg mb-0.5 group-hover:text-[#EE0434] transition-colors truncate px-1">
          {p.areaName1}
        </h3>
        <p className="text-xs text-slate-400 line-through mb-1">
          {formatCurrency(p.minDisplayPrice, p.curency)}
        </p>
        <p className="text-[#EE0434] font-bold text-xs md:text-lg">
          <span className="text-black text-sm md:text-sm lg:text-base">
            {t("from")}:{" "}
          </span>
          <span className="font-black text-lg md:text-xs lg:text-xl">
            {formatCurrency(p.minSellPrice, p.curency)}
          </span>
        </p>
      </div>
    </div>
  );
};

export default ProductCard;