import { Stack } from "expo-router";

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

export default function EntitiesLayout() {
  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: "Entities",
          headerShown: false,
          statusBarTranslucent: true,
          contentStyle: { flex: 1, backgroundColor: "transparent" },
        }}
      />
      <Stack.Screen
        name="clients/new"
        options={{
          title: "New client",
          headerBackTitle: "Entities",
        }}
      />
      <Stack.Screen
        name="clients/[id]"
        options={{
          title: "Client",
          headerBackTitle: "Entities",
        }}
      />
      <Stack.Screen
        name="clients/edit/[id]"
        options={{
          title: "Edit client",
          headerBackTitle: "Client",
        }}
      />
      <Stack.Screen
        name="businesses/new"
        options={{
          title: "New business",
          headerBackTitle: "Entities",
        }}
      />
      <Stack.Screen
        name="businesses/[id]"
        options={{
          title: "Business",
          headerBackTitle: "Entities",
        }}
      />
      <Stack.Screen
        name="businesses/edit/[id]"
        options={{
          title: "Edit business",
          headerBackTitle: "Business",
        }}
      />
    </Stack>
  );
}
