import React, { SVGAttributes } from 'react';

interface LogoProps extends SVGAttributes<SVGElement> {
    showTagline?: boolean;
}

export default function ApplicationLogo({ className = 'h-12 w-auto', showTagline = false, ...props }: LogoProps) {
    return (
        <div className="flex items-center space-x-3 select-none">
            {/* Emblem Circle */}
            <div className="relative flex-shrink-0">
                <div className="w-12 h-12 rounded-full bg-gradient-to-tr from-[#FF0D8F] via-[#FF0D8F] to-[#00C8B2] p-[2.5px] shadow-md shadow-[#FF0D8F]/20 hover:scale-105 transition-transform duration-300">
                    <div className="w-full h-full rounded-full bg-white flex items-center justify-center p-1 relative overflow-hidden">
                        {/* Teal inner ring */}
                        <div className="absolute inset-[2px] rounded-full border-[1.5px] border-[#00C8B2]/40 pointer-events-none" />
                        
                        {/* Cake & Candle Icon */}
                        <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-7 h-7 relative z-10">
                            {/* Candle Flame */}
                            <path d="M20 5C20 5 21.5 8 20 10.5C18.5 8 20 5 20 5Z" fill="#FFD600" />
                            <path d="M20 7C20 7 20.6 8.5 20 9.5C19.4 8.5 20 7 20 7Z" fill="#FFD600" />
                            {/* Candle Body */}
                            <rect x="19" y="10.5" width="2" height="4" rx="1" fill="#FF0D8F" />
                            
                            {/* Top Cake Layer with Icing Drops */}
                            <path d="M12 14.5C12 14.5 15 13.5 20 13.5C25 13.5 28 14.5 28 14.5V20.5C28 20.5 25 21.5 20 21.5C15 21.5 12 20.5 12 20.5V14.5Z" fill="#FFD600" />
                            <path d="M12 14.5C13 16 14.5 16 15.5 15C16.5 16.5 18 16.5 19 15C20 16.5 21.5 16.5 22.5 15C23.5 16.5 25 16.5 26 15C27 16.5 28 15 28 14.5" stroke="#FF0D8F" strokeWidth="1.5" strokeLinecap="round" />
                            
                            {/* Bottom Cake Layer */}
                            <path d="M10 21C10 21 14 19.8 20 19.8C26 19.8 30 21 30 21V28.5C30 30 26 31 20 31C14 31 10 30 10 28.5V21Z" fill="#FF0D8F" />
                            {/* Teal Wave Stripe */}
                            <path d="M10 24.5C12 26 16 26 20 24.5C24 23 28 25 30 24.5" stroke="#00C8B2" strokeWidth="1.8" strokeLinecap="round" />
                            {/* Sparkles */}
                            <circle cx="8" cy="12" r="1" fill="#00C8B2" />
                            <circle cx="32" cy="14" r="1.2" fill="#FFD600" />
                            <circle cx="31" cy="27" r="1" fill="#FFC1E1" />
                        </svg>
                    </div>
                </div>
            </div>

            {/* Typography */}
            <div className="flex flex-col">
                <div className="flex items-center space-x-1">
                    <span className="font-display font-bold text-[10px] tracking-wider uppercase text-[#00C8B2]">Laya's</span>
                </div>
                <span className="font-display font-extrabold text-base tracking-tight text-[#FF0D8F] leading-none">
                    Cakes & Candles
                </span>
                <div className="flex items-center space-x-1 mt-0.5">
                    <span className="text-[9px] font-bold tracking-widest uppercase bg-[#FF0D8F] text-white px-1.5 py-[1px] rounded-full leading-none">
                        Cake Shop
                    </span>
                    {showTagline && (
                        <span className="text-[10px] italic text-slate-500 ml-1">
                            • Baked with love, lit with joy
                        </span>
                    )}
                </div>
            </div>
        </div>
    );
}