import React from 'react';

interface BrandLogoProps {
  size?: 'sm' | 'md' | 'lg';
  showSubtitle?: boolean;
}

export const BrandLogo: React.FC<BrandLogoProps> = ({ size = 'md', showSubtitle = true }) => {
  const iconSizes = {
    sm: 'w-8 h-8',
    md: 'w-10 h-10',
    lg: 'w-12 h-12',
  };

  const textSizes = {
    sm: 'text-lg',
    md: 'text-xl',
    lg: 'text-2xl',
  };

  return (
    <div className="flex items-center gap-3 group select-none cursor-pointer">
      {/* Official PNG Logo Image with sleek container styling */}
      <div className={`relative ${iconSizes[size]} p-0.5 rounded-xl bg-slate-900 border border-slate-700/80 shadow-md shadow-cyan-950/40 group-hover:border-cyan-500/60 group-hover:scale-105 transition-all duration-300 overflow-hidden`}>
        <img
          src="/logo.png"
          alt="RyCourses Emblem"
          className="w-full h-full object-cover rounded-[10px]"
        />
      </div>

      {/* Typography */}
      <div>
        <div className="flex items-center gap-2">
          <span className={`${textSizes[size]} font-extrabold tracking-tight text-white group-hover:text-cyan-300 transition-colors`}>
            Ry<span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400">Courses</span>
          </span>
        </div>
        {showSubtitle && (
          <p className="text-[11px] text-slate-400 font-medium tracking-wide">Plataforma Educativa</p>
        )}
      </div>
    </div>
  );
};