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

export function Home() {
  const navigation = useHomeNavNavigation();
  return (
    <Screen as="ScrollView" options={{ title: "Home" }}>
      <Stack space="24px">
        <Text variant="title">Sink</Text>
        <Button
          onPress={() => {
            navigation.navigate("Buttons");
          }}
        >
          <Button.Text>Buttons</Button.Text>
        </Button>
        <Button
          onPress={() => {
            navigation.navigate("Typography");
          }}
        >
          <Button.Text>Typography</Button.Text>
        </Button>
        <Button
          onPress={() => {
            navigation.navigate("HomeRow");
          }}
        >
          <Button.Text>Row</Button.Text>
        </Button>
        <Button
          onPress={() => {
            navigation.navigate("HomeStack");
          }}
        >
          <Button.Text>Stack</Button.Text>
        </Button>
      </Stack>
    </Screen>
  );
}