import { useState } from 'react'
import {
  CheckboxList,
  CheckboxListItem,
} from '@astryxdesign/core/CheckboxList'
import { Grid } from '@astryxdesign/core/Grid'
import { RadioList, RadioListItem } from '@astryxdesign/core/RadioList'
import { Slider } from '@astryxdesign/core/Slider'

export function SelectionDemo() {
  const [notifications, setNotifications] = useState<string[]>(['email'])
  const [plan, setPlan] = useState('team')
  const [volume, setVolume] = useState(60)

  return (
    <Grid columns={{ minWidth: 220, max: 2 }} gap={5}>
      <CheckboxList
        label="通知方式"
        description="可以选择多个渠道。"
        value={notifications}
        onChange={setNotifications}
        hasDividers>
        <CheckboxListItem
          label="邮件"
          value="email"
          description="每周一发送摘要"
        />
        <CheckboxListItem
          label="推送"
          value="push"
          description="在设备上即时提醒"
        />
        <CheckboxListItem
          label="短信"
          value="sms"
          description="仅用于重要通知"
        />
      </CheckboxList>

      <RadioList label="当前套餐" value={plan} onChange={setPlan}>
        <RadioListItem label="个人版" value="personal" />
        <RadioListItem label="团队版" value="team" />
        <RadioListItem label="企业版" value="enterprise" />
      </RadioList>

      <Slider
        label="提醒音量"
        value={volume}
        onChange={setVolume}
        width="100%"
        valueDisplay="text"
      />
    </Grid>
  )
}