import React from 'react'

import './ContentSwitch.css'

export const ContentSwitch = (props) => {
  const options = props.children.map(target => {
    return target.props
  })

  const activeOption = options.find(option => {
    return option.isActive
  })

  return (
    <div className="ContentSwitch">
      <div className="ContentSwitchOptions">
        {options.map(option => (
          <div className="ContentSwitchOption" data-is-active={option.isActive} onClick={option.onClick} key={option.label}>
            {option.label}
          </div>
        ))}
      </div>
      <div className="ContentSwitchDisplay">
        {activeOption.children()}
      </div>
    </div>
  )
}

ContentSwitch.Option = () => { }