import React, { PropsWithChildren, useState } from 'react'

import { Select, SelectOption as Option } from 'react-icecream'

export default function Demo() {
  const [product, setProduct] = useState<string | null>(null)

  const options = [
    <Option key="kodo" value="kodo">对象存储 Kodo</Option>,
    <Option key="fusion" value="fusion" disabled>CDN</Option>,
    <Option key="dora" value="dora">智能多媒体服务 Dora</Option>,
    <Option key="qvm" value="qvm">云主机服务 QVM</Option>,
    <Option key="pandora" value="pandora">机器数据分析平台 Pandora</Option>
  ]

  return (
    <>
      <Line>
        <Select value={product} onChange={setProduct}>
          {options}
        </Select>
      </Line>
      <Line>
        <Select size="small" defaultValue="qvm">
          {options}
        </Select>
      </Line>
      <Line>
        <Select size="large" clearable placeholder="请选择产品">
          {options}
        </Select>
      </Line>
    </>
  )
}

function Line({ children }: PropsWithChildren<{}>) {
  return <div style={{ marginBottom: '1em' }}>{children}</div>
}