ESIM/EsimLao/esim-vite/src/pages/product-detail/components/PackageOverview.tsx

import { useTranslation } from "react-i18next";
import ProductInfoModal from "../../../components/ProductInfoModal";
import { Package } from "../../../services/product/type";
import React, { useState, useEffect } from "react";
import { formatCarriers } from "../../../logic/loigicUtils";

const PackageOverview = ({ packageInfo }: { packageInfo: Package }) => {
  const { t } = useTranslation();
  const [isInfoModalOpen, setIsInfoModalOpen] = useState<boolean>(false);
  useEffect(() => {
    console.log("Package info updated: ", packageInfo);
  }, [packageInfo]);

  return (
    <>
      <ProductInfoModal
        isOpen={isInfoModalOpen}
        onClose={() => setIsInfoModalOpen(false)}
        packageInfo={packageInfo}
      />
      <div className="bg-[#f0f9ff] rounded-[24px] p-6 md:p-8 border border-sky-100 shadow-sm transition-all">
        <h3 className="text-lg md:text-xl font-black text-slate-900 mb-4">
          {t("productInformation")}:
        </h3>
        <ul className="space-y-4 text-sm md:text-base">
          <li className="">
            <div className="font-bold text-slate-500 min-w-[150px] shrink-0">
              {t("networkProvider")}:
            </div>
            <div className="font-bold text-slate-900">
              {formatCarriers(packageInfo?.carriers)}
            </div>
          </li>
          <li className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-2">
            <span className="font-bold text-slate-500 min-w-[150px] shrink-0">
              {t("infoRegistration")} (eKYC):
            </span>
            <span className="font-medium text-slate-900">
              {packageInfo?.ekycRequired ? t("required") : t("notRequired")}
            </span>
          </li>
          <li className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-2">
            <span className="font-bold text-slate-500 min-w-[150px] shrink-0">
              {t("packageStartTime")}:
            </span>
            <span className="font-medium text-slate-900">
              {packageInfo?.activationMethod === 1
                ? t("usageTimeCalculatedFromSignal")
                : t("usageTimeCalculatedFromPurchase")}
            </span>
          </li>
          <li className="flex flex-col sm:flex-row sm:items-baseline gap-1 sm:gap-2">
            <span className="font-bold text-slate-500 min-w-[150px] shrink-0">
              {t("coverageArea")}:
            </span>
            <span className="font-medium text-slate-900">
              {packageInfo?.coverageArea}
            </span>
          </li>
        </ul>

        <button
          onClick={() => setIsInfoModalOpen(true)}
          className="mt-6 flex items-center text-[#EE0434] font-bold text-sm hover:underline hover:text-[#BB0329] transition-colors group"
        >
          <span>{t("seeMore")}</span>
          <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center ml-2 shadow-sm group-hover:shadow-md transition-all">
            <svg
              className="w-3 h-3 text-[#EE0434]"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2.5}
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </div>
        </button>
      </div>
    </>
  );
};

export default PackageOverview;