import { Button } from "design-system/components/Button";
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 Blank() {
  const navigation = useHomeNavNavigation();
  return (
    <Screen paddingVertical="0px">
      <Box flex={1}>
        <Stack space="24px">
          <Text variant="header">Top Text auto inset heandling</Text>
          <Button
            onPress={() => {
              navigation.navigate("BlankModal");
            }}
          >
            <Button.Text>Open Modal</Button.Text>
          </Button>
          <Button
            onPress={() => {
              navigation.navigate("BlankModalNoHeader");
            }}
          >
            <Button.Text>Open Modal</Button.Text>
          </Button>
        </Stack>
      </Box>
      <Text variant="header">Bottom Text auto inset heandling</Text>
    </Screen>
  );
}