import React from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';

const TABS = [
  { key: 'today', label: '오늘' },
  { key: 'day', label: '일간' },
  { key: 'month', label: '월간' },
  { key: 'year', label: '연간' },
];

export default function StatsPeriodControls({
  dateLabel,
  onMoveDate,
  onPeriodChange,
  period,
}) {
  return (
    <>
      <View style={styles.dateControl}>
        <TouchableOpacity onPress={() => onMoveDate(-1)} style={styles.arrowButton}>
          <Text style={styles.arrowText}>◀</Text>
        </TouchableOpacity>
        <Text style={styles.dateText}>{dateLabel}</Text>
        <TouchableOpacity onPress={() => onMoveDate(1)} style={styles.arrowButton}>
          <Text style={styles.arrowText}>▶</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.tabContainer}>
        {TABS.map((tab) => (
          <TouchableOpacity
            key={tab.key}
            style={[styles.tab, period === tab.key && styles.tabActive]}
            onPress={() => onPeriodChange(tab.key)}
          >
            <Text style={[styles.tabText, period === tab.key && styles.tabTextActive]}>
              {tab.label}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  dateControl: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    marginVertical: 12,
    gap: 16,
  },
  arrowButton: { padding: 8 },
  arrowText: { fontSize: 20, color: '#4B5563' },
  dateText: { fontSize: 16, fontWeight: 'bold', color: '#1F2937' },
  tabContainer: {
    flexDirection: 'row',
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 4,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  tab: {
    flex: 1,
    paddingVertical: 12,
    alignItems: 'center',
    borderRadius: 8,
  },
  tabActive: { backgroundColor: '#3B82F6' },
  tabText: { fontSize: 13, fontWeight: '600', color: '#6B7280' },
  tabTextActive: { color: '#FFFFFF' },
});