import { useState } from 'react'

import { RadioGroup, RadioButton } from '.'

const Story = {
  component: RadioGroup,
  title: 'RadioButtons',
}

export default Story

export const TwoButtons = () => {
  const [selected, setSelected] = useState('1')

  return (
    <div style={{ width: 400 }}>
      <RadioGroup>
        <RadioButton
          defaultChecked={selected === '0'}
          name='api'
          value='0'
          onChange={setSelected}
        >
          Staging
        </RadioButton>
        <RadioButton
          defaultChecked={selected === '1'}
          name='api'
          value='1'
          onChange={setSelected}
        >
          Test
        </RadioButton>
        <RadioButton
          defaultChecked={selected === '2'}
          name='api'
          value='2'
          onChange={setSelected}
        >
          Production
        </RadioButton>
      </RadioGroup>
    </div>
  )
}
