import React, { useState } from 'react'
import localImgLoad from '../../../../lib/localImgLoad'

import img1 from '../../../../assets/images/modern01.png'
import img2 from '../../../../assets/images/secure_data.png'
import img3 from '../../../../assets/images/modern02.png'
import img4 from '../../../../assets/images/modern03.png'


const Main = ({gredient}) => {

    const [activeImg, setActiveImg] = useState(list[0].name)

    const changeActiveImg = (name) => {
        setActiveImg(name)
    }

  return (
    <>
        <section className={`row_am modern_ui_section ${gredient && "gredient-bg"}`} >
            {gredient &&
            <div className="modernui_section_bg modernui-gredient"> 
                <img src="assets/images/section-bg.png" alt="image"/> 
            </div>
            }
            <div className="container">
                <div className="row align-items-center">
                    <div className="col-lg-6">
                        <div className="ui_text w-100">
                            <div className="appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
                                <h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Rewards Accomplishments</div></h3>
                                <p className=''>
                                Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform plan rewards.
                                </p>
                            </div>
                            <div className="row">
                            {list?.map(({ icon, header, paragraph, name }, idx) => (
                                <div className="col-12 mb-20" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
                                    <div
                                        className={`appie-traffic-service features appie-modern-design`}
                                        style={{ paddingRight: "45px" }}
                                    >
                                        <div className="icon">
                                        <i className={icon} />
                                        </div>
                                        <h5 className="title">{header}</h5>
                                        <p>{paragraph}</p>
                                    </div>
                                </div>
                            ))}
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-6">
                        <div className='w-100 ui_image_con d-flex justify-content-center align-items-center'>
                            <div className="ui_images position-relative d-flex justify-content-center align-items-center" data-aos="fade-in" data-aos-duration="1500">
                                <div className="left_img position-relative">
                                    <img 
                                        className="moving_position_animatin position-relative" 
                                        src={ localImgLoad(`images/home/${activeImg}.jpg`)} 
                                        alt="image" 
                                        width='332px'
                                        height='auto'
                                    />
                                </div>
                                <div className="right_img position-relative d-flex flex-column justify-content-start align-items-center">
                                    <div className='d-flex flex-column justify-content-start align-items-center'>
                                        {/* <img className="moving_position_animatin right_img_one" src={img2} alt="image" /> */}
                                        <img 
                                            className="moving_position_animatin right_img_two" 
                                            // src={img3} 
                                            src={
                                                activeImg == 'reward-goals' ? localImgLoad(`images/home/box-reward.png`)
                                                :
                                                activeImg == 'assign-chores' ? localImgLoad(`images/home/box-chores.png`)
                                                :
                                                activeImg == 'financial-edu' ? localImgLoad(`images/home/box-financial.png`)
                                                :
                                                activeImg == 'family-connect' ? localImgLoad(`images/home/box-family.png`)
                                                :
                                                null
                                            } 
                                            alt="image" 
                                        />
                                    </div>
                                    <img 
                                        className="moving_position_animatin right_img_three position-relative" 
                                        src={localImgLoad(`images/home/wrench-side-logo-1.png`)} 
                                        alt="image" 
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </>
  )
}

export default Main



const list = [
      {
        icon: 'fal fa-check',
        header: 'Reward Goals Met',
        paragraph: 'Set goals together and reward accomplishment',
        name: 'reward-goals',
      },
      {
        icon: 'fal fa-check',
        header: 'Assign Regular Chores',
        paragraph: 'Organize essential regular chores to be done',
        name: 'assign-chores',
      },
      {
        icon: 'fal fa-check',
        header: 'Financial Education',
        paragraph: 'Get Kids start early on money management',
        name: 'financial-edu',
      },
      {
        icon: 'fal fa-check',
        header: 'Family Connect',
        paragraph: 'Connect family, share accomplishments with friends',
        name: 'family-connect',
      },
    ]