import isEmpty from 'lodash/isEmpty';
import React from 'react';
import CaseUtils from '../../utils/caseUtils';

interface IProps {
    title: string;
    link?: string;
    description: string;
    onHide: (values: boolean) => void;
}

export default function Rule(props: IProps) {
    const hide = () => {
        props.onHide(true);
    };

    const parseMarkdown = (markdown: string) => {
        return {__html: CaseUtils.markdownToHTML(markdown, {openLinksInNewTab: true})};
    };

    return (
        <div className="se-notification" role="alert">
            <span className="se-notification-icon icon-info-circle" aria-hidden={true}/>
            <div className="se-notification-body">
                <h3 className="se-notification-heading">
                    {!isEmpty(props.link) ? <a href={props.link} target="_blank" className="se-recommended ts-known-vuln">{props.title}</a> : props.title}
                </h3>
                <p className="se-notification-desc" dangerouslySetInnerHTML={parseMarkdown(props.description)}/>
            </div>
            <button
                className="close"
                type="button"
                aria-label="Close"
                onClick={hide}>
                <span aria-hidden="true">×</span>
            </button>
        </div>
    );
}
