import React, { useState } from 'react'

import { TabPane, Tabs, ComponentSize, IndicatorStyle, RadioGroup, Radio } from 'react-icecream'
import { TagIcon } from 'react-icecream/icons'

export default function Demo() {
  const [size, setSize] = useState<ComponentSize>('default')
  const [indicatorStyle, setIndicatorStyle] = useState<IndicatorStyle>('fixed')

  return (
    <div>
      <div>
        <RadioGroup radioType="button" value={size} onChange={setSize}>
          <Radio value="small">小</Radio>
          <Radio value="default">中</Radio>
          <Radio value="large">大</Radio>
        </RadioGroup>
      </div>
      <br />
      <div>
        <RadioGroup radioType="button" value={indicatorStyle} onChange={setIndicatorStyle}>
          <Radio value="fixed">固定长度</Radio>
          <Radio value="dynamic">动态长度</Radio>
        </RadioGroup>
      </div>
      <br />
      <Tabs defaultValue="1" size={size} indicatorStyle={indicatorStyle}>
        <TabPane name="这是比较长的第一个选项" value="1">
          first
        </TabPane>
        <TabPane name="选项2" value="2">
          second
        </TabPane>
        <TabPane
          name={(
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <TagIcon style={{ fontSize: 18, marginRight: 6 }} />第三个选项
            </div>
          )}
          value="3"
        >
          third
        </TabPane>
      </Tabs>
    </div>
  )
}