import React, { FunctionComponent } from 'react';
import cn from 'classnames';

import { Options } from '../Options';
import { IDashboardProps } from './types.d';
import { useTheme } from '../Theme';
import { Title } from '../Title';

export const DashboardSection: FunctionComponent<IDashboardProps> = ({
  children,
  className = '',
  menu,
  style = {},
  title,
  titleSize = 16,
  view = 'row',
}) => {
  const listClassNames = cn({
    dashboard__list: true,
    [view]: true,
    [className]: true,
  });
  const theme = useTheme();
  return (
    <div className="dashboard__section" style={{ borderColor: theme.pallet.gray20 }}>
      <div className="dashboard__head">
        <Title className="dashboard__category" size={titleSize} color="secondary">
          {title}
        </Title>
        {menu ? <Options title={menu.title} titleSize={titleSize} items={menu.items} /> : <></>}
      </div>
      <div className="dashboard__body">
        <div className={listClassNames} style={style}>
          {children}
        </div>
      </div>
    </div>
  );
};
