import React from 'react';

interface LogoProps {
    className?: string;
    size?: number;
    withText?: boolean;
    textClassName?: string;
}

export const Logo: React.FC<LogoProps> = ({ className = '', size = 32, withText = false, textClassName = '' }) => {
    return (
        <div className={`flex items-center gap-3 ${className}`}>
            <div className="relative flex items-center justify-center" style={{ width: size, height: size }}>
                {/* Glow effect */}
                <div className="absolute inset-0 bg-blue-500/30 blur-xl rounded-full" />

                <svg
                    width={size}
                    height={size}
                    viewBox="0 0 40 40"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                    className="relative z-10"
                >
                    <rect width="40" height="40" rx="12" fill="url(#logo-gradient)" />
                    <path
                        d="M20 10C20 10 24 18 28 20C24 22 20 30 20 30C20 30 16 22 12 20C16 18 20 10 20 10Z"
                        fill="white"
                        className="drop-shadow-sm"
                    />
                    <defs>
                        <linearGradient id="logo-gradient" x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse">
                            <stop offset="0%" stopColor="#2563EB" /> {/* Blue 600 */}
                            <stop offset="50%" stopColor="#4F46E5" /> {/* Indigo 600 */}
                            <stop offset="100%" stopColor="#7C3AED" /> {/* Violet 600 */}
                        </linearGradient>
                    </defs>
                </svg>
            </div>

            {withText && (
                <span className={`font-bold text-xl tracking-tight bg-gradient-to-r from-blue-400 to-indigo-300 bg-clip-text text-transparent ${textClassName}`}>
                    AuraK
                </span>
            )}
        </div>
    );
};