import { Screen } from "design-system/components/Screen";
import { Text } from "design-system/components/Text";
import { Box } from "design-system/primitives/Box/Box";
import { Stack } from "design-system/primitives/Stack";
import { useHomeNavNavigation } from "navigation/useTypedNavigation";

export function HomeStack() {
  const navigation = useHomeNavNavigation();
  return (
    <Screen as="ScrollView" options={{ title: "Stack" }}>
      <Stack space="24px" separator={<Box height={3} backgroundColor="divider" />}>
        <Text variant="title">Stacks</Text>
        <Box width={200} height={50} backgroundColor="error" />
        <Box width={200} height={50} backgroundColor="error" />
        <Box width={200} height={50} backgroundColor="error" />
      </Stack>
    </Screen>
  );
}