import { View } from "@tarojs/components"
import styles from './TabSwitch.module.less'
import { FC, useEffect, useState } from "react"

type SwitchProps = {
    options: { label: string, value: string }[]
}
const Switch: FC<SwitchProps> = (props) => {
    const { options } = props

    const [avtiveVal, setAvtiveVal] = useState('')
    useEffect(() => {
        if (options.length > 0) {
            setAvtiveVal(options[0].value)
        }
    }, [options])
    return <View className={styles.box}>
        {options.map((v, i) => {
            const { label, value } = v
            return <View className={`${styles.item} ${avtiveVal === value ? styles.active : ''}`} key={i} onClick={() => {
                setAvtiveVal(value)
            }}>{label}</View>
        })}
    </View>
}

export default Switch