import { ModifyString } from "@/utils/customFunctions/ModifyString";
import { useTranslation } from "react-i18next";

const ProductInformation = ({ productState }) => {
  const { t } = useTranslation("common");

  // Support both old and new (transformed) product structures
  const rawProduct = productState?.product;
  const isTransformed = rawProduct?._isTransformed;

  const sku = productState?.selectedVariation?.sku ?? rawProduct?.sku ?? "";

  const stockStatusRaw =
    productState?.selectedVariation?.stock_status ??
    rawProduct?.stock_status ??
    "in_stock";

  // Support both quantity and stock_quantity field names
  const quantity =
    productState?.selectedVariation?.quantity ??
    productState?.selectedVariation?.stock_quantity ??
    rawProduct?.quantity ??
    rawProduct?.stock_quantity ??
    0;
  return (
    <div className="bordered-box">
      <h4 className="sub-title">{t("ProductInformation")}</h4>

      <ul className="shipping-info">
        <li>
          {t("SKU")} : {sku}
        </li>

        {productState?.selectedVariation?.unit ? (
          <li>
            {t("Unit")} :{" "}
            {productState?.selectedVariation?.unit ??
              productState?.product?.unit}
          </li>
        ) : null}
        {productState?.product?.weight ? (
          <li>
            {t("Weight")} : {productState?.product?.weight}{" "}
            {ModifyString("gms")}
          </li>
        ) : null}
        <li>
          {t("StockStatus")} :
          {stockStatusRaw ? ModifyString(stockStatusRaw, false, "_") : ""}
        </li>
        <li>
          {t("Quantity")} : {quantity} Items Left
        </li>
        <li>
          Categories:{" "}
          {productState?.product?.categories
            ?.map((category) => category.name)
            .join(", ")}
        </li>
      </ul>
    </div>
  );
};

export default ProductInformation;