import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useTheme } from '../../themes/ThemeProvider';
import ClientList from '../../screens/Clients/ClientList';
import ClientDetail from '../../screens/Clients/ClientDetail';
import AddClient from '../../screens/Clients/AddClient';

export type ClientsStackParamList = {
  ClientList: undefined;
  ClientDetail: { id: number };
  AddClient: undefined;
};

const Stack = createNativeStackNavigator<ClientsStackParamList>();

export default function ClientsStack() {
  const { theme } = useTheme();

  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: theme.colors.primary },
        headerTintColor: theme.colors.white,
        headerTitleStyle: { fontWeight: '700' },
      }}
    >
      <Stack.Screen name="ClientList" component={ClientList} options={{ title: 'Clients' }} />
      <Stack.Screen name="ClientDetail" component={ClientDetail} options={{ title: 'Client' }} />
      <Stack.Screen name="AddClient" component={AddClient} options={{ title: 'Add Client', presentation: 'modal' }} />
    </Stack.Navigator>
  );
}