import React from 'react';
import aLogo from '../assets/A-Logo.png';
import logoSm from '../assets/logo-sm.png';
import logoSmWhite from '../assets/logo-sm-white.png';

interface LogoProps {
  className?: string;
  classNameIcon?: string;
  iconOnly?: boolean;
}

export const Logo: React.FC<LogoProps> = ({ 
  className = "", 
  classNameIcon = "h-10", 
  iconOnly = false 
}) => {
  return (
    <div className={`flex items-center gap-3 group ${className}`}>
      {iconOnly ? (
        <div className={`${classNameIcon} aspect-square group-hover:scale-110 transition-all duration-500 overflow-hidden`}>
          <img 
            src={aLogo.src} 
            alt="Agendivo Icon" 
            className="w-full h-full object-contain"
            referrerPolicy="no-referrer"
          />
        </div>
      ) : (
        <div className={`${classNameIcon} flex items-center`}>
          <img 
            src={logoSm.src} 
            alt="Agendivo Logo" 
            className="h-full object-contain dark:hidden"
            referrerPolicy="no-referrer"
          />
          <img 
            src={logoSmWhite.src} 
            alt="Agendivo Logo" 
            className="h-full object-contain hidden dark:block"
            referrerPolicy="no-referrer"
          />
        </div>
      )}
    </div>
  );
};