// src/components/calendar/CalendarHeader.tsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Text, IconButton, useTheme } from 'react-native-paper';
import ViewSwitcher from './ViewSwitcher';
import { CalendarViewMode } from './CustomCalendarView';

interface CalendarHeaderProps {
    currentRangeText: string;
    onPrev: () => void;
    onNext: () => void;
    currentView: CalendarViewMode;
    onViewChange: (view: CalendarViewMode) => void;
}

const CalendarHeader: React.FC<CalendarHeaderProps> = ({ currentRangeText, onPrev, onNext, currentView, onViewChange }) => {
    const theme = useTheme();
    const styles = StyleSheet.create({
        container: {
            flexDirection: 'row',
            alignItems: 'center',
            paddingVertical: 8,
            paddingHorizontal: 8,
            borderBottomWidth: 1,
            borderBottomColor: theme.colors.outlineVariant,
            backgroundColor: theme.colors.surface,
        },
        leftGroup: {
            flexDirection: 'row',
            alignItems: 'center',
            flex: 1,
        },
        title: {
            fontSize: 18,
            fontWeight: 'bold',
            color: theme.colors.onSurface,
            marginLeft: 12,
            flexShrink: 1,
        },
    });

    return (
        <View style={styles.container}>
            <View style={styles.leftGroup}>
                <IconButton icon="chevron-left" onPress={onPrev} size={24} iconColor={theme.colors.primary} />
                <IconButton icon="chevron-right" onPress={onNext} size={24} iconColor={theme.colors.primary} />
                <Text style={styles.title} ellipsizeMode='tail'>{currentRangeText}</Text>
            </View>
            <ViewSwitcher currentView={currentView} onViewChange={onViewChange} />
        </View>
    );
};

export default CalendarHeader;