import React, { Component, useState } from 'react'
import './App.css'
// import Header from './components/Header';
// import Navbar from './components/Navbar';
// import Profile from './components/Profile';

const Input = () => {
  const [value, setValue] = useState('asdf')
  return (
  <>  
      <input value={value} onChange={e => setValue(e.target.value)}/>
      <p>{value.toUpperCase()}</p>
  </>
  )
}

const Spoiler = ({children, header:Header}) => {
  const [show, setShow] = useState(false)
  return (
    <>
      <Header onClick={() => setShow(!show)}/>
      {show && children}
    </>
  )
}

const RangeInput = ({min, max}) => {
  const [el, setColor] = useState();
  return (
    <>
    <Input></Input>
    </>
  )
}

const App = () => {
  
  return (

    <>
      <div className = "spoiler">
        <Spoiler header={({ ...props }) => <h2 {...props}>Show</h2>}>
          <Input/>
          <Input />


          <Spoiler header={({ onClick }) => <button onClick={onClick}>Show</button>}>
            <Input />
            <Input />
          </Spoiler>
        </Spoiler>
      </div>
    </>

    //<RangeInput min={2} max={10} />
  );
}




export default App;