import { CheckCircleFilled, CheckCircleOutlined, CloseCircleFilled, CloseCircleOutlined, InfoCircleFilled, InfoCircleOutlined, StopFilled, StopOutlined, WarningFilled, WarningOutlined } from "@ant-design/icons";
import { useEmotionCss } from "@ant-design/use-emotion-css";

const StatusIconDicts = {
    'success': <CheckCircleOutlined />,
    'warning': <WarningOutlined />,
    'error': <CloseCircleOutlined />,
    'info': <InfoCircleOutlined />,
    'forbid': <StopOutlined />,
};

const StatusIconFilledDicts = {
    'success': <CheckCircleFilled />,
    'warning': <WarningFilled />,
    'error': <CloseCircleFilled />,
    'info': <InfoCircleFilled />,
    'forbid': <StopFilled />,
};

const StatusIcon: React.FC<React.HtmlHTMLAttributes<HTMLSpanElement> & {
    status: 'success' | 'warning' | 'error' | 'info' | 'forbid';
    filled?: boolean;
}> = (props) => {
    const { className, status, filled, ...restProps } = props;

    const spanClassName = useEmotionCss(({ token }) => {
        return {
            display: 'inline-block',
            fontSize: token.fontSize,
            color: token.colorText,
            '&.success': {
                color: token.colorSuccess,
            },
            '&.warning': {
                color: token.colorWarning,
            },
            '&.error': {
                color: token.colorError,
            },
            '&.info': {
                color: token.colorInfo,
            },
            '&.forbid': {
                color: token.colorError,
            },
        };
    });
    return (
        <span className={`${spanClassName} ${className || ''} ${status}`} {...restProps}>
            {filled ? StatusIconFilledDicts[status] : StatusIconDicts[status]}
        </span>
    );
}

export default StatusIcon;