import React from 'react';

interface ContactStatusProps {
    type: 'success' | 'error';
    message?: string;
    onClose: () => void;
}

const ContactStatus: React.FC<ContactStatusProps> = ({ type, message, onClose }) => {
    const isSuccess = type === 'success';

    return (
        <div className={`status-container ${type}`}>
            <div className="status-card">
                <div className="bubbles">
                    {[...Array(12)].map((_, i) => (
                        <span key={i} className={`bubble bubble-${i + 1}`}></span>
                    ))}
                </div>

                <div className="icon-wrapper">
                    <div className="icon-circle">
                        {isSuccess ? (
                            <i className="fa-solid fa-check"></i>
                        ) : (
                            <i className="fa-solid fa-xmark"></i>
                        )}
                    </div>
                </div>

                <h3 className="status-title">
                    {isSuccess ? 'Success' : 'Oooops'}
                </h3>

                <p className="status-message">
                    {message || (isSuccess ? 'Your message has been sent successfully.' : 'Something went wrong. Please try again.')}
                </p>

                <button className="status-btn" onClick={onClose}>
                    {isSuccess ? 'Continue' : 'Try again'}
                </button>
            </div>

        </div>
    );
};

export default ContactStatus;