import React, {CSSProperties, HTMLAttributes, MouseEventHandler} from 'react';
import cls from 'classnames';
import {PaletteType} from '@core0/theme';
import {Tooltip} from '@core0/tooltip';
import {IconType} from './icon.enum';
import './icon.styl';
import './icon-font.styl';

export interface IconProps extends HTMLAttributes<HTMLElement> {
    type: IconType;
    color?: PaletteType;
    tooltip?: string;
    className?: string;
    style?: CSSProperties;
    onClick?: MouseEventHandler;
    onMouseDown?: MouseEventHandler;
    onMouseUp?: MouseEventHandler;
}

export const Icon = (props: IconProps) => {
    const {
        type,
        className,
        color,
        style,
        tooltip,
        onClick,
        onMouseDown,
        onMouseUp
    } = props;

    return (
        <i
            className={cls('ffwd-icons', type, color && `theme-${color}`, className)}
            style={style}
            onClick={onClick}
            onMouseDown={onMouseDown}
            onMouseUp={onMouseUp}
        >
            {tooltip && <Tooltip>{tooltip}</Tooltip>}
        </i>
    );
};