import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {
  LeadsScreen,
  LeadDetailsScreen,
  LeadProposalsScreen,
  LeadTasksScreen,
  LeadNotesScreen,
} from '@features';
import { route, RouteParams } from '@utils';
import { useTheme } from '@theme';

export type LeadsStackParamList = Pick<
  RouteParams,
  'leads' | 'leadDetails' | 'leadProposals' | 'leadTasks' | 'leadNotes'
>;

const Stack = createNativeStackNavigator<LeadsStackParamList>();

export const LeadsStack = () => {
  const { theme: colors } = useTheme();

  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: {
          backgroundColor: colors.header,
        },
        headerTitleStyle: {
          fontSize: 16,
          fontWeight: '700',
          color: colors.text,
        },
        headerTitleAlign: 'center',
        headerTintColor: colors.text,
      }}>
      <Stack.Screen
        name={route.leads}
        component={LeadsScreen}
        options={{ headerTitle: 'Leads' }}
      />
      <Stack.Screen
        name={route.leadDetails}
        component={LeadDetailsScreen}
        options={{ headerTitle: 'Lead Details' }}
      />
      <Stack.Screen
        name={route.leadProposals}
        component={LeadProposalsScreen}
        options={{ headerTitle: 'Proposals' }}
      />
      <Stack.Screen
        name={route.leadTasks}
        component={LeadTasksScreen}
        options={{ headerTitle: 'Tasks' }}
      />
      <Stack.Screen
        name={route.leadNotes}
        component={LeadNotesScreen}
        options={{ headerTitle: 'Notes' }}
      />
    </Stack.Navigator>
  );
};