'use client';

import Image from 'next/image';
import { Box } from '@mui/material';

interface LogoProps {
  /** Total box size in pixels. */
  size?: number;
  /** Show the rounded white container backplate (for use over coloured surfaces). */
  withBackplate?: boolean;
  /** Padding inside the backplate (if any). */
  padding?: number;
  /** Optional border-radius override (defaults to 2 = 8px). */
  rounded?: number;
  /** className for parent positioning. */
  className?: string;
  /** Click handler. */
  onClick?: () => void;
}

export default function Logo({
  size = 36,
  withBackplate = false,
  padding,
  rounded,
  className,
  onClick,
}: LogoProps) {
  const inner = (
    <Image
      src="/logo.png"
      alt="PatchPilot Logo"
      width={size}
      height={size}
      priority
      style={{
        width: '100%',
        height: '100%',
        objectFit: 'contain',
        display: 'block',
      }}
    />
  );

  if (!withBackplate) {
    return (
      <Box
        className={className}
        onClick={onClick}
        sx={{
          width: size,
          height: size,
          flexShrink: 0,
          display: 'inline-flex',
          alignItems: 'center',
          justifyContent: 'center',
          cursor: onClick ? 'pointer' : undefined,
        }}
      >
        {inner}
      </Box>
    );
  }

  return (
    <Box
      className={className}
      onClick={onClick}
      sx={{
        width: size,
        height: size,
        flexShrink: 0,
        p: padding ?? 0.5,
        borderRadius: rounded ?? 2,
        display: 'inline-flex',
        alignItems: 'center',
        justifyContent: 'center',
        bgcolor: 'background.paper',
        border: '1px solid',
        borderColor: 'divider',
        boxShadow: 'var(--pp-shadow-soft)',
        cursor: onClick ? 'pointer' : undefined,
      }}
    >
      {inner}
    </Box>
  );
}