import * as stylex from "@stylexjs/stylex";

import { Flex } from "@/components/flex";
import { Text } from "@/components/typography/text";

import { verticalSpace } from "../../components/theme/semantic-spacing.stylex";

const styles = stylex.create({
  wrapper: {
    paddingBottom: verticalSpace["3xl"],
    paddingTop: verticalSpace["3xl"],
  },
});

export function TextExample() {
  return (
    <Flex direction="column" gap="7xl" style={styles.wrapper}>
      <Flex direction="column" gap="2xl">
        <Text font="sans" size="2xl" weight="bold">
          Title text
        </Text>
        <Text font="sans" size="2xl" weight="bold">
          Sans serif text (default)
        </Text>
        <Text font="serif" size="2xl" weight="semibold">
          Serif text
        </Text>
        <Text font="mono" size="2xl">
          Monospace text
        </Text>
      </Flex>
    </Flex>
  );
}