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={{
          title: "Invoices",
          headerShown: false,
          statusBarTranslucent: true,
          contentStyle: { flex: 1, backgroundColor: "transparent" },
        }}
      />
      <Stack.Screen
        name="new"
        options={{
          title: "New invoice",
          headerBackTitle: "Invoices",
        }}
      />
      <Stack.Screen
        name="[id]"
        options={{
          title: "Invoice",
          headerBackTitle: "Invoices",
        }}
      />
      <Stack.Screen
        name="edit/[id]"
        options={{
          title: "Edit invoice",
          headerBackTitle: "Invoice",
        }}
      />
    </Stack>
  );
}