import { Colors } from "@/constants/colors";
import { DiscoveryProvider } from "@/contexts/DiscoveryContext";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Stack } from "expo-router";
import "react-native-reanimated";

const queryClient = new QueryClient();

export default function RootLayout() {
  return (
    <QueryClientProvider client={queryClient}>
      <DiscoveryProvider>
        <Stack
          screenOptions={{
            headerStyle: { backgroundColor: Colors.background },
            headerTintColor: "#199edb",
            headerTitleStyle: { color: "white" },
            headerBackTitle: "",
          }}
        >
          <Stack.Screen
            name="(tabs)"
            options={{ headerShown: false, headerBackTitle: "" }}
          />
          <Stack.Screen
            name="showDetails"
            options={{
              headerShown: true,
              headerTransparent: true,
              headerBlurEffect: "dark",
              title: "",
              headerBackButtonDisplayMode: "minimal",
            }}
          />
          <Stack.Screen
            name="participant"
            options={{
              headerShown: true,
              headerTransparent: true,
              headerBlurEffect: "dark",
              title: "",
              headerBackButtonDisplayMode: "minimal",
            }}
          />
          <Stack.Screen
            name="legal"
            options={{
              presentation: "modal",
              headerShown: false,
            }}
          />
        </Stack>
      </DiscoveryProvider>
    </QueryClientProvider>
  );
}