import React, { useState } from 'react';
import Accordion from 'react-bootstrap/Accordion';
import FForm from '../components/form';
import Select from '../components/select';
import TToggleButton from '../components/toggle-button';
export default function AAcordion() {
    const [checked, setChecked] = useState(false);
    const handleChecked = (e) => {
	setChecked((checked)=>e.target.checked);
    };
    return (
    <Accordion >
      <Accordion.Item eventKey="0">
        <Accordion.Header>Accordion Item #1</Accordion.Header>
          <Accordion.Body>
	      foo
	      <Select
		id='id'
		name='name'
		defaultValue={42}
		options={[23,42,360]}
		  title='title'
	      />
	      bar
        </Accordion.Body>
      </Accordion.Item>
      <Accordion.Item eventKey="1">
        <Accordion.Header>Accordion Item #2</Accordion.Header>
          <Accordion.Body>
	      <TToggleButton
		  id="toggle-check"
		  type="checkbox"
		  variant="outline-secondary"
		  name="name"
		  checked={checked}
		  value="1"
		  onChange={handleChecked}
		  title="title"
	      />
	  </Accordion.Body>
      </Accordion.Item>
      <Accordion.Item eventKey="2">
        <Accordion.Header>Accordion Item #3</Accordion.Header>
          <Accordion.Body>
	      <FForm
	      />
	  </Accordion.Body>
      </Accordion.Item>
    </Accordion>
  );
}
