import React, { useState } from 'react';
import IconFont from '../../../themeComponents/IconFont';
import './index.less';

const TwoColumnBox = ({ className = '', collapsible = true, leftContent, children }) => {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className={`two-column-layout-container ${className}`}>
      <div className={`two-column-aside ${collapsed ? 'hide-left-aside' : ''}`}>
        <div className="two-colum-left-wrapper">
          <div className="two-colum-left-content">
            {leftContent}
            {collapsible && (
              <span onClick={() => setCollapsed(!collapsed)} className="left-aside-slider-btn">
                <IconFont type={collapsed ? 'icon-S_Arrow_SmallRight' : 'icon-S_Arrow_SmallLeft'} />
              </span>
            )}
          </div>
        </div>
      </div>
      <div className="two-column-content">{children}</div>
    </div>
  );
};

export default TwoColumnBox;
