import React, {useEffect} from "react"

export type FeedbackVariant = 'feedback-success' | 'feedback-error' | 'feedback-warning' | 'feedback-info'

interface FeedbackComponentProps {
    /** Visual variant mapping to CSS classes: success, error, warning, info */
    type: FeedbackVariant
    /** Banner message text or sanitized HTML (when allowHtml = true) */
    message: string
    /** Controls visibility */
    isShowing: boolean
    /** Called when user clicks the close button or autoCloseMs elapses */
    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
    /** Auto close after N milliseconds; disabled when undefined */
    autoCloseMs?: number
    /** Optional ARIA role (defaults to status for polite announcements) */
    role?: 'status' | 'alert'
}
const FeedbackComponent: React.FC<FeedbackComponentProps> = ({
    type,
    message,
    isShowing,
    onClose,
    allowHtml = false,
    autoCloseMs,
    role = 'status',
}) => {
    useEffect(() => {
        if (!isShowing || !autoCloseMs) return;
        const timer = setTimeout(onClose, autoCloseMs);
        return () => clearTimeout(timer);
    }, [isShowing, autoCloseMs, onClose]);

    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={role === 'alert' ? 'assertive' : 'polite'} 
                        dangerouslySetInnerHTML={{ __html: message }}
                    />
                ) : (
                    <div className="feedback-message" aria-live={role === 'alert' ? 'assertive' : 'polite'}>{ message }</div>
                )}
            </div>
            <div className="grid-wrapper">
                <button className="btn feedback-close btn-ghost" 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