import React, { useState } from 'react'

type SettingsTabProps = {
  id: string
  label: string
  checked: boolean
  children: React.ReactNode
}

export default function SettingsTab( { id, label, checked, children }: SettingsTabProps ) {

  const [show, setShow] = useState(checked)

  return (
    <div className="components-panel__section">
      <div className="tab">
        <input
          id={ id }
          type="checkbox"
          checked={ show }
          onChange={ ( e: React.ChangeEvent<HTMLInputElement> ) => setShow(e.target.checked) }
        />
        <label className="tab-label" htmlFor={ id }>{ label }</label>
        <div className="tab-content" style={{ display: show ? 'block' : 'none' }}>
          { children }
        </div>
      </div>
    </div>
  )
}