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'
import Right from './Right'


const Main = ({gredient}) => {

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

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

  return (
    <>
        <section className={`row_am ${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">
                    <div className="col-lg-6">
                        <div className="w-100">
                            <div className="p-0 appie-traffic-title section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                                <h3 className='title'>Set Chores, Set Goals <div className='section_sub_title'>Reward Accomplishments</div></h3>
                                <p className=''>
                                Set goals, tasks, or anything that motivates or needs to be done and reward completion. WrenchBoard is the platform to plan rewards.
                                </p>
                            </div>
                            <div className="appie-traffic-title section_title mb-3" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100" style={{padding: '0'}}>
                                <h3 className='title text-center text-lg-left'>Assign Faster with</h3>
                                <h3 className='w-100 title text-center d-flex justify-content-center justify-content-lg-end flex-nowrap'>
                                    <div className='color-blue italic'>wrench</div><div className='color-purple'>Agent</div>
                                </h3>
                            </div>
                            <div className="row">
                            {list?.map(({ icon, header, paragraph, name }, idx) => (
                                <div className="col-12 col-md-6 mb-10" key={idx} onClick={()=>changeActiveImg(name)} style={{cursor: 'pointer'}}>
                                    <div
                                        className={`appie-traffic-service features appie-modern-design`}
                                    >
                                        <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 mt-4 mt-lg-0">
                        <Right />
                    </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',
      },
    ]