import { Button, Space, toast } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

export function Toasts() {
  return (
    <Section
      id="toast"
      title="轻提示"
      api="toast / Toaster"
      desc="操作反馈，几秒后自动消失。命令式调用：应用根节点挂一次 <Toaster />，任意位置 toast('已保存')。页面内常驻提示用 Notice。"
    >
      <Demo
        title="三种语气"
        desc="success / error 用对应图标与颜色；info 是中性提示。默认 2.4 秒后消失。"
        code={`toast('已复制到剪贴板')
toast.success('已保存')
toast.error('保存失败：内容库被占用')`}
      >
        <Space gap="md" wrap>
          <Button variant="secondary" onClick={() => toast('已复制到剪贴板')}>
            info
          </Button>
          <Button variant="secondary" onClick={() => toast.success('已保存')}>
            success
          </Button>
          <Button variant="secondary" onClick={() => toast.error('保存失败：内容库被占用')}>
            error
          </Button>
        </Space>
      </Demo>

      <Demo
        title="自定义时长"
        desc="duration 毫秒；返回的 id 可以配合 dismissToast 手动关闭。"
        code={`const id = toast.success('稍后会消失', { duration: 1000 })
dismissToast(id)`}
      >
        <Space gap="md" wrap>
          <Button variant="ghost" onClick={() => toast('这条只显示 1 秒', { duration: 1000 })}>
            1 秒后消失
          </Button>
          <Button variant="ghost" onClick={() => toast.success('固定 5 秒', { duration: 5000 })}>
            5 秒后消失
          </Button>
        </Space>
      </Demo>

      <PropsTable
        rows={[
          { name: 'toast(message, options?)', type: '(string, { tone?, duration? }) => number', desc: '弹一条提示，返回 id' },
          { name: 'toast.success / .error', type: '(message, options?) => number', desc: '语气快捷方法' },
          { name: 'dismissToast(id)', type: '(id: number) => void', desc: '手动关闭' },
          { name: '<Toaster />', type: 'ReactNode', desc: '渲染容器，整个应用只挂一次' },
        ]}
      />
    </Section>
  )
}