import { Blockquote } from '@astryxdesign/core/Blockquote'
import { CodeBlock } from '@astryxdesign/core/CodeBlock'
import { Divider } from '@astryxdesign/core/Divider'
import { Heading } from '@astryxdesign/core/Heading'
import { Text } from '@astryxdesign/core/Text'
import { VStack } from '@astryxdesign/core/VStack'

const SNIPPET = `const theme = defineTheme({
  name: 'ocean',
  tokens: {'--color-accent': '#0077B6'},
})`

export function TypographyDemo() {
  return (
    <VStack gap={3}>
      <VStack gap={1}>
        <Heading level={3}>清晰的内容层级</Heading>
        <Text type="body" color="secondary" as="p">
          标题、正文、辅助文字和代码共享同一套字体与节奏，让界面在中文和英文下都保持稳定。
        </Text>
      </VStack>
      <Blockquote cite="Astryx 设计原则">
        把复杂性留在系统里，把清晰留给界面。
      </Blockquote>
      <Divider />
      <CodeBlock
        code={SNIPPET}
        language="tsx"
        title="theme.ts"
        hasLineNumbers={false}
        width="100%"
        size="sm"
      />
    </VStack>
  )
}