import { FC, useEffect, useState } from "react";
import cx from "classnames";
import styles from "./futures.module.scss";
import futuresData from "../../../mockData/futures";
import { baseUrl } from "../../../constants/urls";

interface FutureProps {
  icons: any[];
  page?: "customer" | "default";
}

const Future: FC<FutureProps> = ({ icons = [], page = "default" }) => {
  const [data, setData] = useState<any[]>([]);

  useEffect(() => {
    if (icons.length) {
      const mappedData = futuresData.map((item: any, index: number) => {
        const icon = icons[index]?.image
          ? `${baseUrl}/storage/${icons[index].image}`
          : "";

        return {
          title: item.title,
          subTitle: item.subTitle,
          icon,
        };
      });

      setData(mappedData);
    }
  }, [icons]);

  return (
    <div
      className={cx("container", styles.wrapper)}
      style={{ marginTop: page === "customer" ? "2rem" : 0 }}
    >
      <ul className={styles.home__features__list}>
        {data.map((item: any, idx: number) => (
          <li
            key={idx}
            className={styles.home__features__item}
            style={{
              flexDirection: page === "customer" ? "column" : "row",
              textAlign: page === "customer" ? "center" : "left",
            }}
          >
            <div className={styles.home__features__item_icon}>
              {item.icon && (
                <img
                  src={item.icon}
                  alt={item.title}
                  width={32}
                  height={32}
                  style={{
                    filter:
                      page === "customer"
                        ? "brightness(50%) sepia(100) saturate(200%) hue-rotate(20deg)"
                        : "brightness(0) invert(1)",
                  }}
                />
              )}
            </div>

            <div className={styles.home__features__item_info}>
              <div className={styles.home__features__item_title}>
                {item.title}
              </div>
              <div className={styles.home__features__item_subtitle}>
                {item.subTitle}
              </div>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Future;