// styling
import styles from './styles.module.scss';
import {useState} from "react";

const BannerPagination = ({pageCount,swiper}) => {
    const pages = Array.from({ length: pageCount }, (_, index) => index);
    const checkActive=(index)=>{
        if (swiper!=null){
            let activeIndex=swiper.realIndex;
            if (activeIndex>pageCount)activeIndex=activeIndex%pageCount;
            return activeIndex==index;
        }
        return false;
    }
    const changeIndex =(index)=>{
        // slideTo
        if (swiper!=null){
            if (swiper.realIndex!=index){
                swiper.slideTo(index);
            }
        }
    }
    return (
        <div className={`${styles.banner_pagination}`}>
            {
                pages.map((page,index)=>(
                    <span onClick={()=>{
                        changeIndex(index);
                    }} key={index} className={`${checkActive(index)?styles.banner_pagination_dot_active:''}`}></span>
                ))
            }
        </div>
    );
}

export default BannerPagination