/**
 * 月份选择器组件
 * 支持切换上个月/下个月
 */
import React from 'react'
import { View, Text } from '@tarojs/components'
import { MonthSelectorProps } from '../types/attendance'

export const MonthSelector: React.FC<MonthSelectorProps> = ({
  currentMonth,
  onPreviousMonth,
  onNextMonth
}) => {
  return (
    <View className="flex justify-between items-center mb-4 px-4">
      <Text className="font-semibold text-gray-700 text-base">考勤记录</Text>
      <View className="flex items-center bg-gray-100 rounded-lg px-3 py-1">
        {/* 左箭头图标 */}
        <View
          className="i-heroicons-chevron-left-20-solid w-5 h-5 text-gray-500 mr-2"
          onClick={onPreviousMonth}
        />
        <Text className="text-sm text-gray-700 mr-2">{currentMonth}</Text>
        {/* 右箭头图标 */}
        <View
          className="i-heroicons-chevron-right-20-solid w-5 h-5 text-gray-500"
          onClick={onNextMonth}
        />
      </View>
    </View>
  )
}
