import React, { useState } from 'react'
import { Switch } from 'antd'

function ToggleContent({ label = '', first, second }) {
  const [switched, setSwitched] = useState(true)
  return (
    <div>
      <div className="flex items-center cursor-pointer mb-4">
        <div className="mr-2" onClick={() => setSwitched(!switched)}>{ label }</div>
        <Switch
          onChange={ () => setSwitched(!switched) }
          checked={ !switched }
        />
      </div>
      <div>
        { switched ? first : second }
      </div>
    </div>
  )
}

export default ToggleContent