"use client"
import React, { useState } from 'react';
import Image from 'next/image';

//import { Link } from 'react-router-dom';
import thumb from '../assets/images/features-thumb-11.png';

import rewardIcon from '../assets/images/home/circular-reward.png'
import walletIcon from '../assets/images/home/circular-wallet.png'
import taskIcon from '../assets/images/home/circular-task.png'
import familyIcon from '../assets/images/home/circular-family.png'

function SelectFeatures({ className }) {
    const [tab, setTab] = useState('setting');
    const handleClick = (e, value) => {
        e.preventDefault();
        setTab(value);
    };
    //appie-services-2-area appie-services-8-area pt-90 pb-55
    return (
        <section className={`appie-features-area pt-100 ${className}`} id="features" >
            <div className="container" style={{  marginBottom: '20px' }} >
                <div className="row align-items-center">
                    <div className="col-lg-3">
                        <div className="appie-features-tabs-btn">
                            <div
                                className="nav flex-column nav-pills"
                                id="v-pills-tab"
                                role="tablist"
                                aria-orientation="vertical"
                            >
                                <a
                                    onClick={(e) => handleClick(e, 'setting')}
                                    className={`nav-link ${tab === 'setting' ? 'active' : ''}`}
                                    id="v-pills-home-tab"
                                    data-toggle="pill"
                                    href="#v-pills-home"
                                    role="tab"
                                    aria-controls="v-pills-home"
                                    aria-selected="true"
                                >
                                    <span className={`p-1 rounded-pill`}><Image src={rewardIcon} height='25' width='25' /></span> Reward achievement
                                </a>
                                <a
                                    onClick={(e) => handleClick(e, 'report')}
                                    className={`nav-link ${tab === 'report' ? 'active' : ''}`}
                                    id="v-pills-profile-tab"
                                    data-toggle="pill"
                                    href="#v-pills-profile"
                                    role="tab"
                                    aria-controls="v-pills-profile"
                                    aria-selected="false"
                                >
                                    <span className={`p-1 rounded-pill`}><Image src={taskIcon} height='25' width='25' /></span> Assign tasks or chores
                                </a>
                                <a
                                    onClick={(e) => handleClick(e, 'notice')}
                                    className={`nav-link ${tab === 'notice' ? 'active' : ''}`}
                                    id="v-pills-messages-tab"
                                    data-toggle="pill"
                                    href="#v-pills-messages"
                                    role="tab"
                                    aria-controls="v-pills-messages"
                                    aria-selected="false"
                                >
                                    <span className={`p-1 rounded-pill`}><Image src={familyIcon} height='25' width='25' /></span> Family engagement
                                </a>
                                <a
                                    onClick={(e) => handleClick(e, 'app')}
                                    className={`nav-link ${tab === 'app' ? 'active' : ''}`}
                                    id="v-pills-settings-tab"
                                    data-toggle="pill"
                                    href="#v-pills-settings"
                                    role="tab"
                                    aria-controls="v-pills-settings"
                                    aria-selected="false"
                                >
                                    <span className={`p-1 rounded-pill`}><Image src={walletIcon} height='25' width='25' /></span> Fund wallets
                                </a>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-9">
                        <div className="tab-content" id="v-pills-tabContent">
                            <div
                                className={`${
                                    tab === 'setting' ? 'show active' : ''
                                } tab-pane fade`}
                                id="v-pills-home"
                                role="tabpanel"
                                aria-labelledby="v-pills-home-tab"
                            >
                                <div className="row align-items-center">
                                    <div className="col-lg-6">
                                        <div
                                            className="appie-features-thumb text-center wow animated fadeInUp"
                                            data-wow-duration="2000ms"
                                            data-wow-delay="200ms"
                                        >
                                            <Image src={thumb} alt=""
                                                   style={{ width: '350px', height:'auto', margin: 'auto' }} />
                                        </div>
                                    </div>
                                    <div className="col-lg-6">
                                        <div
                                            className="appie-features-content wow animated fadeInRight"
                                            data-wow-duration="2000ms"
                                            data-wow-delay="600ms"
                                        >
                                            <span>
                                                {/*Reward Achievement*/}
                                            </span>
                                            <h3 className="title">
                                                Reward <br /> Achievement
                                            </h3>
                                            <p>
                                                Reward with points, badges, recognition, or rewards with easy steps
                                            </p>
                                            <a className="main-btn" href="/about-us">
                                                Learn More
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                className={`${tab === 'report' ? 'show active' : ''} tab-pane fade`}
                                id="v-pills-profile"
                                role="tabpanel"
                                aria-labelledby="v-pills-profile-tab"
                            >
                                <div className="row align-items-center">
                                    <div className="col-lg-6">
                                        <div
                                            className="appie-features-thumb text-center animated fadeInUp"
                                            data-wow-duration="2000ms"
                                            data-wow-delay="200ms"
                                        >
                                            <Image src={thumb} alt=""
                                                   style={{ width: '350px', height:'auto', margin: 'auto' }} />
                                        </div>
                                    </div>
                                    <div className="col-lg-6">
                                        <div
                                            className="appie-features-content animated fadeInRight"
                                            data-wow-duration="2000ms"
                                            data-wow-delay="600ms"
                                        >
                                            <span>
                                                {/*Reward Achievement ee*/}
                                            </span>
                                            <h3 className="title">
                                                Assign <br /> tasks or chores
                                            </h3>
                                            <p>
                                                Adapt to your family&#39;s needs with the flexibility of using one-time or repeated tasks or chores with the option to find any task.
                                            </p>
                                            <a className="main-btn" href="#">
                                                Learn More
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                className={`${tab === 'notice' ? 'show active' : ''} tab-pane fade`}
                                id="v-pills-messages"
                                role="tabpanel"
                                aria-labelledby="v-pills-messages-tab"
                            >
                                <div className="row align-items-center">
                                    <div className="col-lg-6">
                                        <div
                                            className="appie-features-thumb text-center animated fadeInUp"
                                            data-wow-duration="2000ms"
                                            data-wow-delay="200ms"
                                        >
                                            <Image src={thumb} alt=""
                                                   style={{ width: '350px', height:'auto', margin: 'auto' }} />
                                        </div>
                                    </div>
                                    <div className="col-lg-6">
                                        <div
                                            className="appie-features-content animated fadeInRight"
                                            data-wow-duration="2000ms"
                                            data-wow-delay="600ms"
                                        >
                                            <span>
                                                {/*Custom Reacyions 77*/}
                                            </span>
                                            <h3 className="title">
                                                Family  <br /> engagement
                                            </h3>
                                            <p>
                                                Connect with education challenges, such as quizzes or learning tasks, and private chats, and invite others to your family.
                                            </p>
                                            <a className="main-btn" href="#">
                                                Learn More
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div
                                className={`${tab === 'app' ? 'show active' : ''} tab-pane fade`}
                                id="v-pills-settings"
                                role="tabpanel"
                                aria-labelledby="v-pills-settings-tab"
                            >
                                <div className="row align-items-center">
                                    <div className="col-lg-6">
                                        <div
                                            className="appie-features-thumb text-center animated fadeInUp"
                                            data-wow-duration="2000ms"
                                            data-wow-delay="200ms"
                                        >
                                            <Image src={thumb} alt=""
                                                   style={{ width: '350px', height:'auto', margin: 'auto' }} />
                                        </div>
                                    </div>
                                    <div className="col-lg-6">
                                        <div
                                            className="appie-features-content animated fadeInRight"
                                            data-wow-duration="2000ms"
                                            data-wow-delay="600ms"
                                        >
                                            <span>
                                                {/*Reward Achievement*/}
                                            </span>
                                            <h3 className="title">
                                                Fund  <br /> wallets
                                            </h3>
                                            <p>
                                                Take control and feel secure by creating a virtual or physical card, allocating funds, and managing wallets for your kids.
                                            </p>
                                            <a className="main-btn" href="#">
                                                Learn More
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/*<div className="features-shape-1">*/}
            {/*    <Image src={shapeSix} alt="" />*/}
            {/*</div>*/}
            {/*<div className="features-shape-2">*/}
            {/*    <Image src={shapeSeven} alt="" />*/}
            {/*</div>*/}
            {/*<div className="features-shape-3">*/}
            {/*    <Image src={shapeEight} alt="" />*/}
            {/*</div>*/}
        </section>
    );
}

export default SelectFeatures;