import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useTheme } from '../../themes/ThemeProvider';
import ShowingCalendar from '../../screens/Showings/ShowingCalendar';
import ShowingCart from '../../screens/Showings/ShowingCart';
import ShowingDetail from '../../screens/Showings/ShowingDetail';
import Feedback from '../../screens/Showings/Feedback';

export type ShowingsStackParamList = {
  ShowingCalendar: undefined;
  ShowingCart: undefined;
  ShowingDetail: { id: number };
  Feedback: { showingId: number };
};

const Stack = createNativeStackNavigator<ShowingsStackParamList>();

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

  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: theme.colors.primary },
        headerTintColor: theme.colors.white,
        headerTitleStyle: { fontWeight: '700' },
      }}
    >
      <Stack.Screen name="ShowingCalendar" component={ShowingCalendar} options={{ title: 'Showings' }} />
      <Stack.Screen name="ShowingCart" component={ShowingCart} options={{ title: 'Showing Tour' }} />
      <Stack.Screen name="ShowingDetail" component={ShowingDetail} options={{ title: 'Showing' }} />
      <Stack.Screen name="Feedback" component={Feedback} options={{ title: 'Feedback', presentation: 'modal' }} />
    </Stack.Navigator>
  );
}