import { Box, Typography } from '@mui/material';

// ==============================|| 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
// collapsed sidebar) renders just the square "D" badge, since the wordmark won't fit.

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

export default function Logo({ onDark = false, compact = false, height = 26, sx }) {
  if (compact) {
    const mark = onDark ? '#FFFFFF' : '#C01227';
    const markText = onDark ? '#C01227' : '#FFFFFF';
    return (
      <Box sx={{ display: 'flex', alignItems: 'center', ...sx }}>
        <Box
          sx={{
            width: 34,
            height: 34,
            borderRadius: 2,
            bgcolor: mark,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            flexShrink: 0,
            boxShadow: onDark ? 'none' : '0 4px 10px rgba(192, 18, 39,0.30)'
          }}
        >
          <Typography sx={{ color: markText, fontWeight: 800, fontSize: '1.25rem', lineHeight: 1 }}>D</Typography>
        </Box>
      </Box>
    );
  }

  return (
    <Box sx={{ display: 'flex', alignItems: 'center', ...sx }}>
      <Box
        component="img"
        src={LOGO_SRC}
        alt="Doormile"
        sx={{
          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%)'
        }}
      />
    </Box>
  );
}
