import { Icon, Divider } from '@vizality/components';
import { joinClassNames } from '@vizality/util/dom';
import { getModule } from '@vizality/webpack';
import React, { memo } from 'react';

/**
 * 
 * @component
 */
export default memo(({ icon, header, description, separator = true, className, children, ...other }) => {
  const { marginBottom20 } = getModule('marginBottom20');
  const { content } = getModule('wrappedLayout');
  const { h1 } = getModule('h1', 'h2', 'h3');
  return (
    <div
      className={joinClassNames('vz-dashboard-content', className)}
      /**
       * @note Excluding these props as we've already stored their values and we don't want
       * to send them to the content div when we use spread props below to allow for
       * custom props/attributes.
       */
      {...other}
    >
      {header && (
        <div className={joinClassNames('vz-dashboard-content-header-wrapper', marginBottom20)}>
          <div className='vz-dashboard-content-header-inner-wrapper'>
            {icon && (
              <Icon
                className='vz-dashboard-content-header-icon-wrapper'
                iconClassName='vz-dashboard-content-header-icon'
                name={icon}
                size='100%'
              />
            )}
            <h1 className={joinClassNames('vz-dashboard-content-header', content)}>
              {header}
            </h1>
          </div>
          {description && (
            <>
              <h4 className={joinClassNames('vz-dashboard-content-description', h1)}>
                {description}
              </h4>
              {separator && (
                <Divider />
              )}
            </>
          )}
        </div>
      )}
      {children}
    </div>
  );
});
