import React from 'react';

interface LogoProps {
    className?: string;
    showText?: boolean;
}

const Logo: React.FC<LogoProps> = ({ className = "", showText = true }) => {
    return (
        <div className={`flex items-center gap-3 group select-none ${className}`}>
            <div className="relative w-10 h-10 flex items-center justify-center">
                {/* Logo Icon: A stylized abstract shape representing 'Dimensions' and 'C' */}
                <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full h-full transform group-hover:scale-105 transition-transform duration-300">
                    <defs>
                        <linearGradient id="logo_gradient" x1="0" y1="0" x2="40" y2="40" gradientUnits="userSpaceOnUse">
                            <stop offset="0%" stopColor="#64FFDA" />
                            <stop offset="100%" stopColor="#0A192F" />
                        </linearGradient>
                        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
                            <feGaussianBlur stdDeviation="2" result="blur" />
                            <feComposite in="SourceGraphic" in2="blur" operator="over" />
                        </filter>
                    </defs>

                    {/* Background Shape (Hexagon-ish / Cube profile) */}
                    <path
                        d="M20 4L36 12V28L20 36L4 28V12L20 4Z"
                        stroke="#64FFDA"
                        strokeWidth="1.5"
                        strokeOpacity="0.3"
                        fill="transparent"
                    />

                    {/* Central Element: The 'C' / Core Logic */}
                    {/* A tech-style path forming a C shape connected to the center */}
                    <path
                        d="M26 14L20 10L10 15V25L20 30L26 26"
                        stroke="#64FFDA"
                        strokeWidth="2.5"
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        filter="url(#glow)"
                        className="group-hover:stroke-[#64FFDA] transition-colors"
                    />

                    {/* The 'Spark' / Data Point */}
                    <rect x="24" y="19" width="3" height="3" fill="#64FFDA" className="animate-pulse">
                        <animate attributeName="opacity" values="1;0.3;1" dur="2s" repeatCount="indefinite" />
                    </rect>
                </svg>
            </div>

            {showText && (
                <div className="flex flex-col">
                    <div className="flex items-baseline">
                        <span className="text-white font-bold text-xl tracking-wide leading-none font-sans">CCDW</span>
                        {/* Dot accent */}
                        <span className="w-1.5 h-1.5 bg-[#64FFDA] rounded-full ml-1 mb-0.5"></span>
                    </div>
                    <span className="text-slate-400 text-[10px] font-medium tracking-[0.35em] leading-none mt-1.5 uppercase group-hover:text-[#64FFDA] transition-colors duration-300">
                        乘策达维
                    </span>
                </div>
            )}
        </div>
    );
};

export default Logo;
