import { Button, IconButton, Icon, Popover, Space, Text, Tooltip } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

export function Tooltips() {
  return (
    <Section
      id="tooltip"
      title="工具提示"
      api="Tooltip / Popover"
      desc="Tooltip 是 hover / 聚焦时出现的一行文字；Popover 是点击展开的小面板。两者都只做轻量内容，复杂交互请用 Drawer / Modal。"
    >
      <Demo
        title="文字提示"
        desc="纯 CSS 定位（top / bottom），触发元素建议是可聚焦的按钮或链接；键盘聚焦时同样出现。"
        code={`<Tooltip content="重新扫描项目">
  <IconButton label="刷新" icon={<Icon name="refresh_3_line" />} />
</Tooltip>

<Tooltip content="出现在下方" placement="bottom">
  <Button variant="secondary">下方提示</Button>
</Tooltip>`}
      >
        <Space gap="lg">
          <Tooltip content="重新扫描项目">
            <IconButton label="刷新" icon={<Icon name="refresh_3_line" />} variant="soft" />
          </Tooltip>
          <Tooltip content="出现在下方" placement="bottom">
            <Button variant="secondary">下方提示</Button>
          </Tooltip>
        </Space>
      </Demo>

      <Demo
        title="气泡卡片"
        desc="点击触发器展开，点外部或 Esc 关闭；面板里可以放说明、链接或简单表单。"
        code={`<Popover
  content={<Text size="sm">改动会立即写入 data/stash.db，5 秒内推送前端。</Text>}
>
  <Button variant="ghost">说明</Button>
</Popover>`}
      >
        <Space gap="lg">
          <Popover
            content={
              <Text size="sm" tone="sub">
                改动会立即写入 data/stash.db，服务端 5 秒内通过 SSE 推送前端。
              </Text>
            }
          >
            <Button variant="ghost">说明</Button>
          </Popover>
          <Popover
            placement="bottom-end"
            content={
              <Space direction="column" gap="sm" align="start">
                <Text size="sm" strong>
                  快捷操作
                </Text>
                <Button size="sm" variant="ghost">
                  重新扫描
                </Button>
                <Button size="sm" variant="ghost">
                  打开内容库
                </Button>
              </Space>
            }
          >
            <Button variant="secondary">更多操作</Button>
          </Popover>
        </Space>
      </Demo>

      <PropsTable
        rows={[
          { name: 'content', type: 'ReactNode', required: true, desc: '提示内容' },
          { name: 'placement', type: "'top' | 'bottom'", defaultValue: "'top'", desc: '出现方向' },
          { name: 'children', type: 'ReactNode', required: true, desc: '触发元素（建议可聚焦）' },
        ]}
      />

      <PropsTable
        rows={[
          { name: 'content', type: 'ReactNode', required: true, desc: '面板内容' },
          { name: 'children', type: 'ReactNode', required: true, desc: '触发器' },
          { name: 'placement', type: "'bottom-start' | 'bottom-end'", defaultValue: "'bottom-start'", desc: '对齐方式' },
        ]}
      />
    </Section>
  )
}