// ==============================|| DOORMILE WORDMARK LOGO ||============================== //
// Uses the brand wordmark asset (white PNG). `onDark` shows it as-is on dark/red
// surfaces; on light surfaces it is recoloured to near-black. `compact` (e.g. the
// navbar) renders the square navbar mark instead, since the wordmark won't fit.

const LOGO_SRC = '/Doormile-logo.png';
const NAVBAR_MARK_SRC = '/navbarLogo.png';

export default function Logo({ onDark = false, compact = false, height = 26, size = 64, style = {} }) {
  if (compact) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', ...style }}>
        <img
          src={NAVBAR_MARK_SRC}
          alt="Doormile"
          style={{
            width: size,
            height: size,
            display: 'block',
            objectFit: 'cover',
            flexShrink: 0
          }}
        />
      </div>
    );
  }

  return (
    <div style={{ display: 'flex', alignItems: 'center', ...style }}>
      <img
        src={LOGO_SRC}
        alt="Doormile"
        style={{
          height,
          width: 'auto',
          display: 'block',
          // The asset is white; on light surfaces recolour it to Doormile Red (#C01227)
          filter: onDark ? 'none' : 'brightness(0) saturate(100%) invert(15%) sepia(93%) saturate(5437%) hue-rotate(346deg) brightness(81%) contrast(92%)'
        }}
      />
    </div>
  );
}
