import React from "react"

interface FeedbackComponentProps {
    type: string
    message: string
    isShowing: boolean
    onClose: () => void
    /**
     * If true, the message will be rendered as HTML.
     * Make sure the HTML content is properly sanitized to prevent XSS attacks.
     */
    allowHtml?: boolean
}
const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
    type, 
    message, 
    isShowing, 
    onClose,
    allowHtml = false
}) => {

    return (
        <div className={`feedback grid feedback-grid dm-pro-tokens ${type} ${isShowing ? 'showing' : ''}`}>
            <div className="grid-wrapper">
                <span className="feedback-icon"></span>
            </div>
            <div className="grid-wrapper">
                {allowHtml ? (
                    <div 
                        className="feedback-message" 
                        aria-live="polite" 
                        dangerouslySetInnerHTML={{ __html: message }}
                    />
                ) : (
                    <div className="feedback-message" aria-live="polite">{ message }</div>
                )}
            </div>
            <div className="grid-wrapper">
                <button className="feedback-close dm-pro--ghost-button" aria-label="Close feedback box"
                        onClick={onClose}>
                    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M11.1498 9.99999L15.5748 5.57499C15.8873 5.26249 15.8873 4.73749 15.5748 4.42499C15.2623 4.11249 14.7373 4.11249 14.4248 4.42499L9.9998 8.84999L5.5748 4.42499C5.2623 4.11249 4.7373 4.11249 4.4248 4.42499C4.1123 4.73749 4.1123 5.26249 4.4248 5.57499L8.8498 9.99999L4.4248 14.425C4.1123 14.7375 4.1123 15.2625 4.4248 15.575C4.5873 15.7375 4.7873 15.8125 4.9998 15.8125C5.2123 15.8125 5.4123 15.7375 5.5748 15.575L9.9998 11.15L14.4248 15.575C14.5873 15.7375 14.7873 15.8125 14.9998 15.8125C15.2123 15.8125 15.4123 15.7375 15.5748 15.575C15.8873 15.2625 15.8873 14.7375 15.5748 14.425L11.1498 9.99999Z"
                            fill="#606060"/>
                    </svg>
                </button>
            </div>
        </div>
    )
}

export default FeedbackComponent