import React from "react";
import { Stack } from "expo-router";
import { StatusBar } from "expo-status-bar";

export default function RootLayout(): React.ReactElement {
  return (
    <>
      <StatusBar style="light" />
      <Stack
        screenOptions={{
          headerStyle: { backgroundColor: "#1a1f2e" },
          headerTintColor: "#e1e4ed",
          headerTitleStyle: { fontWeight: "600" },
          contentStyle: { backgroundColor: "#0f1419" },
        }}
      >
        <Stack.Screen name="index" options={{ headerShown: false }} />
        <Stack.Screen name="login" options={{ title: "Sign In" }} />
        <Stack.Screen name="register" options={{ title: "Create Account" }} />
        <Stack.Screen name="library" options={{ title: "My Library" }} />
        <Stack.Screen name="collections" options={{ title: "Collections" }} />
        <Stack.Screen name="settings" options={{ title: "Settings" }} />
      </Stack>
    </>
  );
}