// src/components/calendar/ViewSwitcher.tsx
import React from 'react';
import { View, StyleSheet } from 'react-native';
import { useTheme } from 'react-native-paper'; // Keep useTheme
import { CalendarViewMode } from './CustomCalendarView';
import CustomSegmentedButtons from './CustomSegmentedButtons'; // Import the custom component

interface ViewSwitcherProps {
    currentView: CalendarViewMode;
    onViewChange: (view: CalendarViewMode) => void;
}

const ViewSwitcher: React.FC<ViewSwitcherProps> = ({ currentView, onViewChange }) => {
    const theme = useTheme();
    const styles = StyleSheet.create({
        container: {
            paddingVertical: 8,
            // Add horizontal padding if needed to center or space the component
            paddingHorizontal: 8,
            minWidth: 150, // Add a minimum width
            alignSelf: 'center', // Center the component if it's smaller than the parent
        },
    });

    return (
        <View style={styles.container}>
            <CustomSegmentedButtons // Use the custom component
                value={currentView}
                onValueChange={onViewChange} // No need to cast type here anymore
                buttons={[
                    // Pass the same button configuration
                    { value: 'month', label: 'M' /* Use full labels for clarity */ },
                    { value: 'week', label: 'W' },
                    { value: '3day', label: '3D' },
                ]}
            />
        </View>
    );
};

export default ViewSwitcher;