import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { TabNavigator } from './TabNavigator';
import { WalletConnectScreen } from '../screens/WalletConnect';
import { PoolDetailsScreen } from '../screens/PoolDetails';
import { VaultDetailsScreen } from '../screens/VaultDetails';
import { ProposalDetailsScreen } from '../screens/ProposalDetails';

const Stack = createStackNavigator();

export function StackNavigator() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: '#3b82f6',
        },
        headerTintColor: '#ffffff',
        headerTitleStyle: {
          fontWeight: 'bold',
        },
      }}
    >
      <Stack.Screen
        name="WalletConnect"
        component={WalletConnectScreen}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Main"
        component={TabNavigator}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="PoolDetails"
        component={PoolDetailsScreen}
        options={{ title: 'Pool Details' }}
      />
      <Stack.Screen
        name="VaultDetails"
        component={VaultDetailsScreen}
        options={{ title: 'Vault Details' }}
      />
      <Stack.Screen
        name="ProposalDetails"
        component={ProposalDetailsScreen}
        options={{ title: 'Proposal Details' }}
      />
    </Stack.Navigator>
  );
}