import React from 'react';
import styles from './index.less';
import classnames from 'classnames';
import { ComponentsLightColored } from '@easyv/react-icons';
import { authorityConfig } from 'components/ScreenTool';

function CommponentModule({
  title = '组件',
  icon,
  centerActivatedState,
  onActivate,
  active = false
}: {
  title?: string;
  icon?: React.ReactNode;
  centerActivatedState?: string;
  onActivate: (x: string) => void;
  active?: boolean;
}): React.ReactElement {
  return (
    <div
      className={classnames(styles.item, {
        [styles.active]: active,
        [styles.lock]: centerActivatedState && authorityConfig[centerActivatedState]?.includes(title)
      })}>
      <div
        className={styles.itemBox}
        onClick={() => {
          onActivate?.(title);
        }}>
        <span className={styles.icon}>{icon || <ComponentsLightColored />}</span>
        <span className={styles.text}>{title}</span>
      </div>
    </div>
  );
}

export default CommponentModule;
