import React, { useState } from 'react';
import { Collapsible } from '../collapsible/collapsible';

const InfoBar = ({ children }) => {
  const [ isVisible, setIsVisible ] = useState(true);

  return (
    <Collapsible isCollapsed={!isVisible}>
      <div className="c-info-bar">
        <span className='c-info-bar__content'>
          { children }
          <i className="c-info-bar__close icon-close-hamburger" onClick={() => setIsVisible(false)} />
        </span>
      </div>
    </Collapsible>
  );
};

export { InfoBar };