// Comfortek logo — uses the official PNG asset (dark version, white wordmark on black).
// Props:
//   size      — height in px of the rendered logo (default 32)
//   withText  — if false, renders only the icon portion (left ~25% of image)
//   tagline   — unused, kept for API compatibility

/* global React */

const Logo = ({ size = 32, withText = true, tagline = false }) => {
  const aspectFull = 2508 / 627;   // ~4.0
  const aspectIcon = 627 / 627;    // 1:1 — square icon crop (left portion)

  if (withText) {
    return (
      <img
        src="img/comfortek-logo-dark.png"
        alt="Comfortek"
        height={size}
        width={Math.round(size * aspectFull)}
        style={{
          display: 'block',
          objectFit: 'contain',
          mixBlendMode: 'screen',
          WebkitMixBlendMode: 'screen',
        }}
      />
    );
  }

  // Icon-only: show left ~25% of the image
  const iconH = size;
  return (
    <div style={{
      width: iconH,
      height: iconH,
      overflow: 'hidden',
      flexShrink: 0,
      display: 'inline-block',
    }}>
      <img
        src="img/comfortek-logo-dark.png"
        alt="Comfortek"
        height={iconH}
        width={Math.round(iconH * aspectFull)}
        style={{
          display: 'block',
          objectFit: 'cover',
          objectPosition: 'left center',
          mixBlendMode: 'screen',
          WebkitMixBlendMode: 'screen',
        }}
      />
    </div>
  );
};

window.Logo = Logo;