/**
 * Toast Notification Component
 */

import React, { useEffect } from 'react';

export interface ToastProps {
    message: string;
    type?: 'success' | 'error' | 'info';
    isVisible: boolean;
    onClose: () => void;
    duration?: number;
}

const Toast: React.FC<ToastProps> = ({
    message,
    type = 'success',
    isVisible,
    onClose,
    duration = 3000,
}) => {
    useEffect(() => {
        if (isVisible && duration > 0) {
            const timer = setTimeout(() => {
                onClose();
            }, duration);

            return () => clearTimeout(timer);
        }
    }, [isVisible, duration, onClose]);

    if (!isVisible) return null;

    const typeStyles = {
        success: 'bg-green-50 border-green-200 text-green-800',
        error: 'bg-red-50 border-red-200 text-red-800',
        info: 'bg-blue-50 border-blue-200 text-blue-800',
    };

    const iconStyles = {
        success: 'text-green-600',
        error: 'text-red-600',
        info: 'text-blue-600',
    };

    return (
        <div
            className={`fixed bottom-3 sm:bottom-4 right-3 sm:right-4 left-3 sm:left-auto z-[100] ${typeStyles[type]} border rounded-lg shadow-lg px-3 sm:px-4 py-2 sm:py-3 min-w-0 sm:min-w-[300px] max-w-full sm:max-w-[500px] flex items-center gap-2 sm:gap-3 animate-slide-in-up`}
            role="alert"
        >
            <div className={`flex-shrink-0 ${iconStyles[type]}`}>
                {type === 'success' && (
                    <svg
                        className="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M5 13l4 4L19 7"
                        />
                    </svg>
                )}
                {type === 'error' && (
                    <svg
                        className="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M6 18L18 6M6 6l12 12"
                        />
                    </svg>
                )}
                {type === 'info' && (
                    <svg
                        className="w-5 h-5"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                    >
                        <path
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            strokeWidth={2}
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
                        />
                    </svg>
                )}
            </div>
            <div className="flex-1 text-sm sm:text-base break-words">{message}</div>
            <button
                onClick={onClose}
                className={`flex-shrink-0 ${iconStyles[type]} hover:opacity-70 transition-opacity`}
                aria-label="Close notification"
            >
                <svg
                    className="w-4 h-4"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                >
                    <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M6 18L18 6M6 6l12 12"
                    />
                </svg>
            </button>
        </div>
    );
};

export default Toast;