import style from "./floatIcon.module.css";
import { useRouter } from "next/router";
import NextImage from "@/other/NextImage";
import { customerApi } from "../../api/api";
import { useState } from "react";
import { useEffect } from "react";

export default function FloatIcons() {
  const router = useRouter();
  const [floatIcons, setFloatIcons] = useState([]);
  const getFloatIcons = async () => {
    await customerApi
      .get("/float/icons")
      .then((res) => {
        if (res.data.success === true) {
          if (res.data.data && res.data.data.length > 0) {
            setFloatIcons(res.data.data);
          }
        }
        console.log("floatIcons", floatIcons);
      })
      .catch((err) => {
        console.log("Err", err);
      });
  };
  useEffect(() => {
    getFloatIcons();
  }, []);
  return (
    <div
      className={`${style.float_section} ${
        router.asPath.includes("/checkout") ? style.float_checkout : ""
      }`}
    >
      {floatIcons &&
        floatIcons.length > 0 &&
        floatIcons.map((item, index) => (
          <div
            className={style.float_icon}
            key={index}
            onClick={() => {
              if (item.path.includes("http")) {
                window.open(item.path, "_blank");
              } else {
                router.push(item.path);
              }
            }}
          >
            <NextImage
              src={
                process.env.NEXT_PUBLIC_UPLOADS + "/float_icons/" + item.image
              }
              alt={item.name}
              className={style.float_image}
            />
          </div>
        ))}
    </div>
  );
}
