import { Banner } from '@astryxdesign/core/Banner'
import { HStack } from '@astryxdesign/core/HStack'
import { ProgressBar } from '@astryxdesign/core/ProgressBar'
import { Skeleton } from '@astryxdesign/core/Skeleton'
import { Spinner } from '@astryxdesign/core/Spinner'
import { Text } from '@astryxdesign/core/Text'
import { VStack } from '@astryxdesign/core/VStack'

export function FeedbackDemo() {
  return (
    <VStack gap={4}>
      <Banner
        status="info"
        title="新版本已经准备好"
        description="刷新页面后即可使用最新的组件与主题。"
      />
      <VStack gap={2}>
        <Text type="label">工作区初始化</Text>
        <ProgressBar label="工作区初始化" value={68} hasValueLabel isLabelHidden />
      </VStack>
      <HStack gap={4} vAlign="center" wrap="wrap">
        <HStack gap={2} vAlign="center">
          <Spinner size="sm" />
          <Text type="supporting" size="sm">
            正在同步数据…
          </Text>
        </HStack>
        <VStack gap={1} width={160}>
          <Skeleton width="100%" height={14} index={0} />
          <Skeleton width="70%" height={14} index={1} />
        </VStack>
      </HStack>
    </VStack>
  )
}