import React, { useState } from 'react';

const Logo = ({ className = "w-12 h-12", ...props }) => {
    const [hasError, setHasError] = useState(false);

    return (
        <div className={`relative flex items-center justify-center ${className} group`} {...props}>
            {!hasError ? (
                <img
                    src="/logo.png"
                    alt="BNXCHAIN Logo"
                    className="w-full h-full object-contain drop-shadow-[0_0_15px_rgba(0,242,255,0.6)] group-hover:drop-shadow-[0_0_25px_rgba(255,204,0,0.8)] transition-all duration-500"
                    onError={() => setHasError(true)}
                />
            ) : (
                // Futuristic Geometric Fallback if image fails
                <div className="w-full h-full relative flex items-center justify-center">
                    <div className="absolute inset-0 bg-gradient-to-br from-accent-blue via-white to-accent-gold rounded-full blur-md opacity-20 animate-pulse"></div>
                    <div className="w-1/2 h-1/2 border-2 border-accent-blue rotate-45 animate-spin-slow"></div>
                    <div className="absolute w-full h-full border border-white/10 rounded-full"></div>
                </div>
            )}
        </div>
    );
};

export default Logo;