import { Breadcrumb } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

export function Breadcrumbs() {
  return (
    <Section
      id="breadcrumb"
      title="面包屑"
      api="Breadcrumb"
      desc="详情页的路径导航：中间项可点，最后一项是当前页（aria-current=page）。"
    >
      <Demo
        title="基础用法"
        desc="items 里只有最后一项会忽略 href；分隔符默认 `/`。"
        layout="column"
        code={`<Breadcrumb
  items={[
    { label: '首页', href: '/' },
    { label: '常用推荐', href: '/c/recommend' },
    { label: '常用站点' },
  ]}
/>`}
      >
        <Breadcrumb
          items={[
            { label: '首页', href: '#top' },
            { label: '常用推荐', href: '#top' },
            { label: '常用站点' },
          ]}
        />
      </Demo>

      <Demo
        title="自定义分隔符"
        desc="separator 可以是字符或图标；过深的路径在窄屏会换行。"
        code={`<Breadcrumb separator="›" items={items} />`}
      >
        <Breadcrumb
          separator="›"
          items={[
            { label: '工作台', href: '#top' },
            { label: '内容库', href: '#top' },
            { label: '推荐电影' },
          ]}
        />
      </Demo>

      <PropsTable
        rows={[
          { name: 'items', type: 'BreadcrumbItem[]', required: true, desc: '{ label, href? }[]' },
          { name: 'separator', type: 'ReactNode', defaultValue: "'/'", desc: '分隔符' },
          { name: 'onNavigate', type: '(href: string) => void', desc: '接管点击（SPA 路由），不传则整页跳转' },
        ]}
      />
    </Section>
  )
}