// navigationEnums.ts
export enum NavigationType {
    Home = 'HOME',
    About = 'ABOUT',
    Contact = 'CONTACT',
    // Add more navigation types as needed
}

// navigation.types.ts
import { NavigationType } from './navigationEnums';

export interface NavigationItem {
    title: string;
    path: string;
    type: NavigationType;
}

export interface NavigationState {
    items: NavigationItem[];
    selected: NavigationType | null;
}

// index.tsx
import React, { useState } from 'react';
import { NavigationItem, NavigationType } from './navigation.types';
import { NavigationType as NavigationTypeEnum } from './navigationEnums';

const navigationItems: NavigationItem[] = [
    { title: 'Home', path: '/', type: NavigationTypeEnum.Home },
    { title: 'About', path: '/about', type: NavigationTypeEnum.About },
    { title: 'Contact', path: '/contact', type: NavigationTypeEnum.Contact },
    // Add more navigation items as needed
];

const initialState = {
    items: navigationItems,
    selected: null as NavigationType | null,
};

const NavigationComponent: React.FC = () => {
    const [state, setState] = useState(initialState);

    const handleItemClick = (itemType: NavigationType) => {
        setState(prevState => ({
            ...prevState,
            selected: itemType,
        }));
    };

    return (
        <View>
            <Text>🚀 My Navigation</Text>
            <FlatList
                data={state.items}
                keyExtractor={item => item.type}
                renderItem={({ item }) => (
                    <TouchableOpacity onPress={() => handleItemClick(item.type)}>
                        <Text>{item.title}</Text>
                    </TouchableOpacity>
                )}
            />
        </View>
    );
};

export default NavigationComponent;

// Example screen component using NavigationItem type
import React from 'react';
import { NavigationItem } from './navigation.types';

const Sidebar: React.FC<{ items: NavigationItem[] }> = ({ items }) => (
    <View>
        {items.map(item => (
            <TouchableOpacity key={item.type} onPress={() => navigateTo(item.path)}>
                <Text>📲 {item.title}</Text>
            </TouchableOpacity>
        ))}
    </View>
);

export default Sidebar;

// Example screen component using NavigationItem type
import React from 'react';
import { NavigationItem } from './navigation.types';

const Sidebar: React.FC<{ items: NavigationItem[] }> = ({ items }) => (
    <View>
        {items.map(item => (
            <TouchableOpacity key={item.type} onPress={() => navigateTo(item.path)}>
                <Text>📲 {item.title}</Text>
            </TouchableOpacity>
        ))}
    </View>
);

export default Sidebar;