import React, { useMemo } from 'react';
import IconFont from '../../themeComponents/IconFont';
import './index.less';
import Shared from './shared';

function DeviceIcon({ cType, type, status, onlineClass = 'online-device', offlineClass = 'offline-device', className, style, ...props }) {
  const options = useMemo(() => (cType ? { icon: `icon-${type}-${cType}` } : Shared.getCameraTypeIcon(type, status)), [type, cType, status]);
  const onLine = useMemo(() => status * 1 === 1, [status]);
  const iconClassName = useMemo(() => (onLine ? onlineClass : offlineClass), [offlineClass, onLine, onlineClass]);
  return <IconFont style={style} type={options.icon} className={`${iconClassName} ${className ? className : ''}`} {...props} />;
}

export default React.memo(DeviceIcon);
