import { useState } from 'react'
import { BreadcrumbItem, Breadcrumbs } from '@astryxdesign/core/Breadcrumbs'
import { VStack } from '@astryxdesign/core/VStack'
import { Step, Stepper } from '@astryxdesign/core/Stepper'
import { Tab, TabList } from '@astryxdesign/core/TabList'

export function NavigationDemo() {
  const [tab, setTab] = useState('overview')
  const [step, setStep] = useState(2)

  return (
    <VStack gap={5}>
      <Breadcrumbs>
        <BreadcrumbItem href="/">首页</BreadcrumbItem>
        <BreadcrumbItem href="/components">组件</BreadcrumbItem>
        <BreadcrumbItem isCurrent>导航示例</BreadcrumbItem>
      </Breadcrumbs>

      <TabList value={tab} onChange={setTab} hasDivider>
        <Tab value="overview" label="概览" />
        <Tab value="activity" label="活动" />
        <Tab value="settings" label="设置" />
      </TabList>

      <VStack width="100%">
        <Stepper activeStep={step} orientation="horizontal" onStepClick={setStep}>
          <Step step={0} label="购物车" />
          <Step step={1} label="配送" />
          <Step step={2} label="支付" />
          <Step step={3} label="完成" />
        </Stepper>
      </VStack>
    </VStack>
  )
}