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";

export function Typography() {
  return (
    <Screen as="ScrollView" options={{ title: "Typography" }}>
      <Stack space="40px">
        <Stack space="24px">
          <Text variant="title">Title</Text>
          <Text variant="header">Header</Text>
          <Text variant="body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi at ullamcorper nisl. In facilisis
            pharetra hendrerit.
          </Text>
          <Text>
            Maecenas eget bibendum sem. Donec ultrices lacinia odio, ut luctus tellus euismod ut. Aenean
            ultricies lacus enim, id viverra lorem scelerisque ullamcorper.
          </Text>
          <Text variant="caption">Caption</Text>
          <Text variant="small">Small</Text>
        </Stack>
        <Stack space="24px">
          <Text variant="title" weight="black">
            Overrides (Black weight)
          </Text>
          <Text variant="header" color="button-primary">
            Header
          </Text>
          <Text variant="body">
            Lorem ipsum dolor sit amet,{" "}
            <Text variant="body" strikeThrough>
              consectetur adipiscing elit
            </Text>
            . Morbi at ullamcorper nisl. In facilisis pharetra hendrerit.{" "}
            <Text variant="body" weight="bold" color={{ custom: "blue" }} underline>
              Vivamus id consequat erat, maximus convallis quam.
            </Text>{" "}
            Nullam rutrum fermentum purus, ut accumsan risus tempus id.
          </Text>
          <Text>
            Maecenas eget bibendum sem. Donec ultrices lacinia odio, ut luctus tellus euismod ut. Aenean
            ultricies lacus enim, id viverra lorem scelerisque ullamcorper. Duis lacinia eros eget urna
            condimentum, non semper nibh pretium. Cras efficitur porttitor mattis. Praesent condimentum
            aliquam blandit
          </Text>
          <Text variant="caption" color="error">
            Caption
          </Text>
          <Text size="32px" weight="bold">
            Size and weight props
          </Text>
          {/* custom styles with large lineheight does not impact spacing around text node */}
          <Box backgroundColor="button-primary">
            <Text style={{ fontSize: 32, lineHeight: 60 }}>
              Custom styles with large lineHeight has no effect on spacing of text nodes
            </Text>
          </Box>
        </Stack>
      </Stack>
    </Screen>
  );
}