import React from 'react'
import { useTheme } from '../theme'

const Logo = ({ 
  size = 32,
  alt = 'GestorEasy Logo',
  className = '',
  ...props 
}) => {
  const { theme } = useTheme()
  
  // Determina qual variante da logo usar baseado no tema
  const logoVariant = theme.logo // 'dark' ou 'light'
  const logoSrc = `/assets/logo-${logoVariant}.png`
  
  const logoStyles = {
    width: `${size}px`,
    height: `${size}px`,
    objectFit: 'contain',
    transition: 'all 0.2s ease-in-out'
  }
  
  return (
    <img
      src={logoSrc}
      alt={alt}
      style={logoStyles}
      className={className}
      {...props}
    />
  )
}

export default Logo