import React from 'react';
import PropTypes from 'prop-types';

// Components
import { Title, Flex } from '@ui/components';

// Style
let classes = {};
/* istanbul ignore next */
if (typeof window !== 'undefined' || typeof _COMPILED_ === 'undefined') classes = require('./style.module.scss');

const DashHeader = props => {
  const { icon, title, children } = props;
  return (
    <div className={classes.DashHeader}>
      <Flex className={classes['DashHeader-Inner']}>
        <Title className={classes['DashHeader-Title']}>
          <i className={[icon, classes['DashHeader-Title-Icon']].join(' ')}></i>
          {title}
        </Title>
        <div className={classes['DashHeader-Children']}>{children}</div>
      </Flex>
    </div>
  );
};

DashHeader.propTypes = {
  children: PropTypes.any,
  icon: PropTypes.string,
  title: PropTypes.string,
};

export default DashHeader;
