import { Button, Input, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'

interface Props {
  list: any[]
  handChose?: (any) => void
  handReset?: () => void
}
const Tabs = (props: Props) => {
  const { list = [], handChose } = props

  return (
    <View className={styles.main}>
      <View className={styles.flexBox}>
        {
          list.map((item, index) => {
            return (
              <View className={styles.itemBox} key={index} onClick={() => handChose?.(item)}>
                <View
                  className={classnames(item.showBorder ? styles.activeItems : styles.itemFont)}

                >{item?.name}</View >
                {
                  item.showBorder && <View className={styles.borderBox} ></View>
                }
              </View >
            )
          })
        }

      </View >
      <View className={styles.resetBox} onClick={() => props?.handReset?.()}>重置</View>
    </View>
  )
}
export default memo(Tabs)