import { Carousel } from "antd"
import React, { useRef, useState } from "react"
import qyImg from '../../assets/image/hero_qy.png';
import ltxImg from '../../assets/image/hero_ltx.png';
import smImg from '../../assets/image/hero_sm.png';
import wtlImg from '../../assets/image/hero_wtl.png';
import jydImg from '../../assets/image/hero_jyd.png';
import alImg from '../../assets/image/hero_al.png';


const CAROUSELDATA = [
    { image: qyImg, value: 'qy' },
    { image: ltxImg, value: 'ltx' },
    { image: smImg, value: 'sm' },
    { image: wtlImg, value: 'wtl' },
    { image: jydImg, value: 'jyd' },
    { image: alImg, value: 'al' },
]

/**
 * 奇侠传
 * @returns 
 */
const HeroBox: React.FC = () => {

    /****************************/
    const ref = useRef<any>()
    const [active, setActive] = useState<number>(0)
    /****************************/

    return <section className="hero-box">
        <h1 className="news-title"><span>奇侠传</span></h1>
        <div className="hero-inner">
            <Carousel dots={false} ref={ref} beforeChange={(_: number, nextSlide: number) => { setActive(nextSlide) }}>
                {CAROUSELDATA.map(item => <div key={item.value}>
                    <img src={item.image} alt="" />
                </div>)}
            </Carousel>
            <div className="hero-nav">
                {CAROUSELDATA.map((item, index) => <span
                    key={item.value}
                    className={`${item.value} ${active === index ? 'active' : ''}`}
                    onClick={() => {
                        ref?.current?.goTo(index)
                    }}
                />)}
            </div>
        </div>
    </section>
}

export default React.memo(HeroBox)