import React, { useState } from "react";
import style from "./productCard.module.css";
import Image from "next/image";
import NextImage from "@/other/NextImage";
import { createNotification } from "@/customHook/useNotification";
import { managerApi } from "@/api/api";
import Loader from "@/components/utils/loader";

const ProductCard = (props) => {
  const [returnInvoicePDFBtnLoader, setReturnInvoicePDFBtnLoader] =
    useState(false);

  return (
    <div
      className={`${style.product_section} ${style.box_design}`}
      key={props.order.name}
    >
      {props.order.products.length > 0 && (
        <>
          <div className={style.product_data_section}>
            <div className={style.product_data_section_less}>
              {props.order.products.map((item, index) => (
                <div
                  className={style.product_data}
                  key={`${item}_${index}_products`}
                >
                  <div className={style.product_image}>
                    <NextImage
                      src={
                        props.order.products[0].image &&
                        props.order.products[0].image.length > 0 &&
                        process.env.NEXT_PUBLIC_UPLOADS +
                          "/products/" +
                          props.order.products[0].image[0]
                      }
                      className={style.nextImage}
                      alt="image"
                      fill
                    />
                  </div>

                  <div className={style.selectBox}>
                    <div>
                      Name:
                      <span className="capitalize">
                        {props.order.products[0].name
                          .replaceAll("<b>", "")
                          .replaceAll("</b>", "")
                          .replaceAll("<i>", "")
                          .replaceAll("</i>", "")
                          .replaceAll("</br>", "")}
                      </span>
                    </div>
                    <div>
                      Product Code:
                      <span>{props.order.products[0].product_code}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
            <div className={`${style.order_status} capitalize`}>
              {props.order.order_status.replaceAll("_", " ")}
            </div>
          </div>
        </>
      )}
      <hr />
      <div>
        Order ID : <span>{props.order._id}</span>
      </div>
    </div>
  );
};

export default ProductCard;
