import { Heading } from "@chakra-ui/react"

export const HeadingBasic = () => {
  return <Heading>The quick brown fox jumps over the lazy dog</Heading>
}

import { Heading, Stack } from '@chakra-ui/react'

export const HeadingWithSizes = () => {
  return (
    <Stack gap="2" align="flex-start" pb="2">
      <Heading size="sm">Heading (sm)</Heading>
      <Heading size="md">Heading (md)</Heading>
      <Heading size="lg">Heading (lg)</Heading>
      <Heading size="xl">Heading (xl)</Heading>
      <Heading size="2xl">Heading (2xl)</Heading>
      <Heading size="3xl">Heading (3xl)</Heading>
      <Heading size="4xl">Heading (4xl)</Heading>
      <Heading size="5xl">Heading (5xl)</Heading>
      <Heading size="6xl">Heading (6xl)</Heading>
    </Stack>
  )
}

import { Heading, Stack } from '@chakra-ui/react'

export const HeadingWithMultiLine = () => {
  return (
    <Stack gap="2" align="flex-start" pb="2">
      <Heading size="sm">
        The quick brown fox
        <br />
        jumps over the lazy dog
      </Heading>
      <Heading size="md">
        The quick brown fox
        <br />
        jumps over the lazy dog
      </Heading>
      <Heading size="lg">
        The quick brown fox
        <br />
        jumps over the lazy dog
      </Heading>
      <Heading size="xl">
        The quick brown fox
        <br />
        jumps over the lazy dog
      </Heading>
      <Heading size="2xl">
        The quick brown fox
        <br />
        jumps over the lazy dog
      </Heading>
      <Heading size="3xl">
        The quick brown fox
        <br />
        jumps over the lazy dog
      </Heading>
      <Heading size="4xl">
        The quick brown fox
        <br />
        jumps over the lazy dog
      </Heading>
      <Heading size="5xl">
        The quick brown fox
        <br />
        jumps over the lazy dog
      </Heading>
      <Heading size="6xl">
        The quick brown fox
        <br />
        jumps over the lazy dog
      </Heading>
    </Stack>
  )
}

import { Heading, Highlight, Stack, Text } from '@chakra-ui/react'

export const HeadingWithHighlight = () => {
  return (
    <Stack>
      <Heading size="3xl" letterSpacing="tight">
        <Highlight query="Saas UI" styles={{ color: 'accent.solid' }}>
          Build modern SaaS applications with Saas UI
        </Highlight>
      </Heading>
      <Text fontSize="md" color="fg.muted">
        Saas UI provides enterprise-ready components and patterns to help you
        build professional applications faster than ever.
      </Text>
    </Stack>
  )
}

import { Heading, Stack } from "@chakra-ui/react"

export const HeadingWithAsProp = () => {
  return (
    <Stack>
      <Heading as="h1">Level 1</Heading>
      <Heading as="h2">Level 2</Heading>
      <Heading as="h3">Level 3</Heading>
    </Stack>
  )
}

import { Heading, Stack } from "@chakra-ui/react"

export const HeadingWithWeights = () => {
  return (
    <Stack>
      <Heading fontWeight="normal">Normal</Heading>
      <Heading fontWeight="medium">Medium</Heading>
      <Heading fontWeight="semibold">Semibold</Heading>
      <Heading fontWeight="bold">Bold</Heading>
    </Stack>
  )
}

import { Button, Heading, Stack, Text } from "@chakra-ui/react"
import { LuArrowRight } from "react-icons/lu"

export const HeadingWithComposition = () => {
  return (
    <Stack align="flex-start">
      <Heading size="2xl">Modern payments for Stores</Heading>
      <Text mb="3" fontSize="md" color="fg.muted">
        PayMe helps startups get paid by anyone, anywhere in the world
      </Text>
      <Button>
        Create account <LuArrowRight />
      </Button>
    </Stack>
  )
}