import React, { useState } from 'react';

import classNames from 'classnames';

import styles from './index.less';

const Categories  = (props) => {
    const [currentIndex, setCurrentIndex] = useState(0)
    const selectCategories = (event, index) => {
        event.preventDefault();
        event.stopPropagation();
        event.nativeEvent.stopImmediatePropagation()
        setCurrentIndex(index)
        props.onChange && props.onChange(index)
       
    }
    return (
        <div className={styles['menu-categories']}>
            {
                (props.data || []).map((item, index) => {
                    const categorieCls = classNames(styles['categorie-name'], styles.btn, currentIndex === index ? styles.active: '');
                    return (
                        <div className={categorieCls} key={index} onClick={(event) => selectCategories(event, index)}>
                            <img src={`https://panda-water.cn/web4/${item.extData.icon}`}/>
                            <span>{item.extData.label}</span>
                        </div>
                    )
                })
            }
        </div>
    )
}

export default Categories;