import React from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { useTheme } from '../../theme';

interface PeriodSwitcherProps {
  /** 当前周期文案（如「2026年7月」） */
  label: string;
  onPrev: () => void;
  onNext: () => void;
}

/** 周期切换器：上一周期 / 周期文案 / 下一周期。hitSlop 扩大箭头触控区。 */
export const PeriodSwitcher = React.memo(function PeriodSwitcher({ label, onPrev, onNext }: PeriodSwitcherProps) {
  const { theme } = useTheme();
  const btnStyle = ({ pressed }: { pressed: boolean }) => [
    styles.btn,
    { borderRadius: theme.radii.lg, borderColor: theme.colors.border, opacity: pressed ? 0.6 : 1 },
  ];
  return (
    <View style={styles.row}>
      <Pressable onPress={onPrev} hitSlop={8} accessibilityRole="button" style={btnStyle}>
        <Ionicons name="chevron-back" size={18} color={theme.colors.fgPrimary} />
      </Pressable>
      <Text style={[theme.typography.h3, { color: theme.colors.fgPrimary }]}>{label}</Text>
      <Pressable onPress={onNext} hitSlop={8} accessibilityRole="button" style={btnStyle}>
        <Ionicons name="chevron-forward" size={18} color={theme.colors.fgPrimary} />
      </Pressable>
    </View>
  );
});

const styles = StyleSheet.create({
  row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 20, paddingBottom: 12 },
  btn: { width: 32, height: 32, borderWidth: StyleSheet.hairlineWidth, alignItems: 'center', justifyContent: 'center' },
});