import Label from "components/Label";
import AboutTeamItem from "./AboutTeamItem";
import useMediaQuery from "hooks/useMediaQuery";
import { useRef, useState } from "react";
import HideButton from "components/common/Buttons/HideButton";
import { useSelector } from 'react-redux';
import { selectAboutUsTeam } from "store/slices/AboutSlice";
import { useAnimation } from "hooks/useAnimation";



const Team = ({ isLoading }) => {
    const container = useRef();
    const team = useSelector(selectAboutUsTeam)

    useAnimation({
        items: ['.about-team h2', '.about-team__desc', '.about-team-item'],
        container,
        dependencies: [isLoading],
    })

    const { card, description, tag, title } = team


    const isMobile = useMediaQuery('max-width: 640px');
    const [active, setActive] = useState(false);

    function toggleAccordion() {
        setActive(!active);
    }

    return (
        <section ref={container} className="container about-team">
            <Label text={tag} />
            <h2>{title}</h2>
            <div className="body1 about-team__desc">{description}</div>
            {
                isMobile ?
                    <>
                        <div className='about-team-container'>
                            {card?.slice(0, 5)?.map((item, index) => (
                                <AboutTeamItem key={index} data={item} />
                            ))}
                        </div>

                        <div className={`about-team-mob-container ${active ? "open" : ""}`}>
                            <div className='about-team-container'>
                                {card?.slice(5)?.map((item, index) => (
                                    <AboutTeamItem key={index} data={item} />
                                ))}
                            </div>
                        </div>
                        <HideButton text={"Show more"} onClick={toggleAccordion} isOpen={active} />
                    </>
                    :
                    <div className="about-team-container">
                        {
                            card?.map((item, index) => (
                                <AboutTeamItem key={index} data={item} />
                            ))
                        }
                    </div>
            }

        </section>
    )
}



export default Team;

• [F] AboutTeamItem.jsx
  Delete
• [F] index.jsx
  Delete