import { useState } from 'react'
import { ScrollTop } from '../../src'
import { Demo } from '../components/Demo'
import { PropsTable } from '../components/PropsTable'
import { Section } from '../components/Section'

export function ScrollTopSection() {
  const [visible, setVisible] = useState(false)

  return (
    <Section
      id="scrolltop"
      title="回到顶部"
      api="ScrollTop"
      desc="固定在视口右侧中部的圆形按钮，可见性由页面根据滚动位置控制。真实位置在页面右侧，不在下面的预览区里。"
    >
      <Demo
        title="显隐控制"
        desc="桌面端滚的是内容容器（传 targetId），窄屏滚的是窗口（不传）；两种都支持，避免滚错了不生效。"
        code={`<ScrollTop visible={scrolled} targetId="content-scroll" />`}
      >
        <button
          type="button"
          onClick={() => setVisible((current) => !current)}
          style={{
            padding: '6px 14px',
            borderRadius: 6,
            border: '1px solid var(--su-border-strong)',
            background: 'var(--su-bg-card)',
            cursor: 'pointer',
          }}
        >
          {visible ? '隐藏' : '显示'}回到顶部按钮
        </button>
        <span style={{ alignSelf: 'center', color: 'var(--su-text-muted)', fontSize: 12 }}>
          点左侧按钮，右下角会淡入 / 淡出
        </span>
      </Demo>

      <ScrollTop visible={visible} />

      <PropsTable
        rows={[
          { name: 'visible', type: 'boolean', required: true, desc: '是否显示' },
          { name: 'targetId', type: 'string', desc: '滚动容器 id；不传则滚窗口' },
          { name: 'label', type: 'string', defaultValue: "'回到顶部'", desc: '无障碍名称与 title' },
          { name: 'offset', type: 'number', defaultValue: '24', desc: '距右侧距离（px）' },
        ]}
      />
    </Section>
  )
}