import React from 'react';

interface LogoProps {
    className?: string;
    showText?: boolean;
    size?: 'sm' | 'md' | 'lg';
}

const Logo: React.FC<LogoProps> = ({ className = "", showText = true, size = 'md' }) => {
    // Sizes
    const dim = size === 'sm' ? 24 : size === 'md' ? 32 : 48;
    const textSize = size === 'sm' ? "text-lg" : size === 'md' ? "text-xl" : "text-3xl";

    return (
        <div className={`flex items-center gap-3 ${className}`}>
            {/* GEOMETRIC LOGO MARK - Abstract 'A' / Graph Up */}
            <svg width={dim} height={dim} viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="32" height="32" rx="8" className="fill-foreground" />
                <path d="M10 22L16 10L22 22" stroke="hsl(var(--background))" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
                <path d="M12.5 17H19.5" stroke="hsl(var(--background))" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
            </svg>

            {showText && (
                <div className="flex flex-col justify-center">
                    <h1 className={`font-extrabold tracking-tight leading-none text-foreground ${textSize}`}>ARBITRA</h1>
                    {size !== 'sm' && <p className="text-[9px] font-bold text-muted-foreground tracking-[0.3em] mt-0.5 ml-0.5">PRO SYSTEM</p>}
                </div>
            )}
        </div>
    );
};

export default Logo;