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


const Future:FC<any> = ({icons,page}) => {

  const[data,SetData]=  useState([]);

  useEffect(() => {
    SetData(changeValue())
  }, [icons])
  
  const changeValue=()=>{
    const newArray:any = [];
   
    futuresData.map((oldD:any,id:number)=>{
      icons.map((im:any,idx:number)=>{
        
        const  img:any = `${baseUrl}/storage/${im.image}`;
        if(id===idx){
          const oldObj = {title:oldD.title,subTitle:oldD.subTitle, icon:img};
          
          
          newArray.push(oldObj);
        }
       
     
    })
   
   
    
  })
  return newArray;
  }

  return (
    <>
      <div className={cx("container")} style={{marginTop:page=="customer"?"2rem":0}}>
        <ul className={styles.home__features__list}>
          {data.map((item:any, idx:number) => {
            return <li key={idx} className={styles.home__features__item} style={{flexDirection:page=="customer"? "column":"row"}}>
                <div className={styles.home__features__item_icon} >
                <img width={60} height={60} src={item.icon} alt={`${idx}-${item.icon}`} style={{filter:page=="customer"? "brightness(50%) sepia(100) saturate(100) hue-rotate(25deg)":"brightness(0) invert(1)"}}/>
                </div>
                <div className={styles.home__features__item_info} style={{textAlign:page=="customer"? "center":"left"}}>
              <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;