import React, { useState } from 'react'
import SelectableIcon from 'playbook-ui'

const SelectableIconDefault = () => {
  const [ checkSelected, toggleSelected ] = useState(true)
  const [ checkUnselected, toggleUnselected ] = useState(false)
  const [ checkDisabled, toggleDisabled ] = useState(false)

  return (

    <div className="pb--doc-demo-row">
      <SelectableIcon
          checked={checkSelected}
          icon="dollar-sign"
          inputId={10}
          onChange={() => toggleSelected(!checkSelected)}
          text="US Dollar"
      />

      <SelectableIcon
          checked={checkUnselected}
          icon="euro-sign"
          inputId={11}
          onChange={() => toggleUnselected(!checkUnselected)}
          text="Euro"
      />

      <SelectableIcon
          checked={checkDisabled}
          disabled
          icon="yen-sign"
          inputId={12}
          onChange={() => toggleDisabled(!checkDisabled)}
          text="Yen"
      />
    </div>
  )
}

export default SelectableIconDefault

import React, { useState } from 'react'

import SelectableIcon from 'playbook-ui'

const SelectableIconSingleSelect = () => {
  const [ selectedFormat, toggleFormat ] = useState(null)

  return (

    <div className="pb--doc-demo-row">
      <SelectableIcon
          checked={selectedFormat === 'Cassette'}
          icon="cassette-tape"
          inputId={13}
          multi={false}
          name="music-format"
          onChange={() => toggleFormat('Cassette')}
          text="Cassette"
          value="Cassette"
      />

      <SelectableIcon
          checked={selectedFormat === 'CD'}
          icon="compact-disc"
          inputId={14}
          multi={false}
          name="music-format"
          onChange={() => toggleFormat('CD')}
          text="CD"
          value="CD"
      />

      <SelectableIcon
          checked={selectedFormat === 'Vinyl'}
          icon="album-collection"
          inputId={15}
          multi={false}
          name="music-format"
          onChange={() => toggleFormat('Vinyl')}
          text="Vinyl"
          value="Vinyl"
      />
    </div>
  )
}

export default SelectableIconSingleSelect