import { Stack } from "expo-router";

import { fonts } from "@/constants/theme";
import { useAppTheme } from "@/contexts/ThemeContext";

export default function InvoicesLayout() {
  const { colors } = useAppTheme();

  return (
    <Stack
      screenOptions={{
        contentStyle: { backgroundColor: "transparent" },
        headerStyle: { backgroundColor: colors.cardGlass },
        headerTitleStyle: {
          fontFamily: fonts.heading,
          fontSize: 18,
          color: colors.foreground,
        },
        headerShadowVisible: false,
        headerTintColor: colors.foreground,
      }}
    >
      <Stack.Screen
        name="index"
        options={{
          headerShown: false,
          statusBarTranslucent: true,
          contentStyle: { flex: 1, backgroundColor: "transparent" },
        }}
      />
      <Stack.Screen name="[id]" options={{ title: "Invoice" }} />
      <Stack.Screen name="edit/[id]" options={{ title: "Edit" }} />
    </Stack>
  );
}
