import React from 'react';
import { Link } from 'react-router-dom';
import './index.less';

function UserLayout(props) {
  const { menu = [], active, right, center, ads = [], onClick } = props;

  return (
    <div className={`user-layout content ${right ? 'right' : ''}`} onClick={(e) => onClick && onClick(e)}>
      <div className="left-layout">
        <div className="block-layout">
          {menu.map(item => {
            return (
              <Link to={item.path} className={`item ${active === item.key ? 'active' : ''}`}>
                {item.short}
              </Link>
            );
          })}
        </div>
      </div>
      {center && (
        <div className="center-layout">
          {center.length > 0 ? (
            center.map(item => {
              if (!item) return null;
              return <div className="block-layout">{item}</div>;
            })
          ) : (<div className="block-layout">{center}</div>)}
        </div>
      )}
      {right && (
        <div className="right-layout">
          {right.length > 0 ? (
            right.map(item => {
              if (!item) return null;
              return <div className="block-layout">{item}</div>;
            })
          ) : (<div className="block-layout">{right}</div>)}
          {ads.length > 0 && ads.map(item => {
            return <div className="block-layout">{item}</div>;
          })}
        </div>
      )}
    </div>
  );
}
export default UserLayout;