import React, { useState } from 'react'
import { View, Button, Text } from '@tarojs/components'
import TimePicker from './TimePicker'
import styles from './test.module.scss'

const TimePickerTest: React.FC = () => {
  const [visible, setVisible] = useState(false)
  const [selectedTime, setSelectedTime] = useState('')

  const handleConfirm = (year: number, month: number) => {
    setSelectedTime(`${year}年${month}月`)
    setVisible(false)
  }

  return (
    <View className={styles.container}>
      <Text className={styles.title}>TimePicker 组件测试</Text>
      
      <Button 
        type="primary" 
        onClick={() => setVisible(true)}
        className={styles.button}
      >
        打开时间选择器
      </Button>
      
      {selectedTime && (
        <View className={styles.result}>
          <Text>已选择: {selectedTime}</Text>
        </View>
      )}
      
      <TimePicker
        visible={visible}
        onClose={() => setVisible(false)}
        onConfirm={handleConfirm}
        defaultYear={2024}
        defaultMonth={6}
        minYear={2020}
        maxYear={2030}
      />
    </View>
  )
}

export default TimePickerTest