import { Button } from '@astryxdesign/core/Button'
import { HStack } from '@astryxdesign/core/HStack'
import { Link } from '@astryxdesign/core/Link'
import { Text } from '@astryxdesign/core/Text'
import { VStack } from '@astryxdesign/core/VStack'
import { useThemeMode } from '../theme/useThemeMode'

export function ProvidersDemo() {
  const { mode, toggleMode } = useThemeMode()
  const nextModeLabel = mode === 'light' ? '切换到深色主题' : '切换到浅色主题'

  return (
    <VStack gap={3}>
      <Text type="body" color="secondary" as="p">
        当前页面已经由 Theme、LinkProvider 和 InternationalizationProvider
        包裹。切换主题或点击站内链接即可看到实际效果。
      </Text>
      <HStack gap={3} wrap="wrap" vAlign="center">
        <Button label={nextModeLabel} variant="primary" onClick={toggleMode} />
        <Link href="/about" isStandalone>
          通过 LinkProvider 打开的站内链接
        </Link>
      </HStack>
      <Text type="supporting" size="sm">
        Astryx 内置文案同样是中文，例如「必填」「关闭」「跳至内容」。
      </Text>
    </VStack>
  )
}