import logoLight from '../assets/logo_white_mode.png';
import logoDark from '../assets/logo_white_dark_mode.png';

const sizes = {
  sm: {
    gap: '0.75rem',
    logoHeight: 42,
    titleSize: '1rem',
    subtitleSize: '0.85rem',
  },
  md: {
    gap: '1rem',
    logoHeight: 54,
    titleSize: '1.2rem',
    subtitleSize: '0.95rem',
  },
  lg: {
    gap: '1.25rem',
    logoHeight: 78,
    titleSize: '1.5rem',
    subtitleSize: '1.05rem',
  },
};

export function BrandMark({ compact = false, theme = 'light', size }) {
  const logoSrc = theme === 'dark' ? logoDark : logoLight;
  const variant = size || (compact ? 'sm' : 'md');
  const currentSize = sizes[variant] || sizes.md;

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: currentSize.gap,
      }}
    >
      <img
        src={logoSrc}
        alt="Sothis"
        style={{
          height: currentSize.logoHeight,
          width: 'auto',
          objectFit: 'contain',
        }}
      />
      <div>
        <div style={{ fontSize: currentSize.titleSize, fontWeight: 800 }}>
          Sothis Omnichannel
        </div>
        <div style={{ color: 'var(--color-text-soft)', fontSize: currentSize.subtitleSize }}>
          Central de atendimento unificada
        </div>
      </div>
    </div>
  );
}