import Image from 'next/image';

import { cn } from '@/lib/utils';

const sizeClasses = {
  sm: 'size-8 rounded-md border-2 p-0.5',
  md: 'size-12 rounded-md border-2 p-1.5',
  lg: 'size-28 rounded-lg border-[5px] p-3',
} as const;

const variantClasses = {
  default: 'border-white bg-primary shadow-md',
  solid: 'border-white bg-primary',
  glass: 'border-primary-foreground bg-primary/85 shadow-md',
  sidebar: 'border-0 bg-primary',
} as const;

type LogoWrapperProps = {
  alt?: string;
  className?: string;
  imageClassName?: string;
  priority?: boolean;
  size?: keyof typeof sizeClasses;
  variant?: keyof typeof variantClasses;
};

export function LogoWrapper({
  alt = 'RoadMonitor logo',
  className,
  imageClassName,
  priority = false,
  size = 'md',
  variant = 'default',
}: LogoWrapperProps) {
  return (
    <span
      className={cn(
        'inline-flex shrink-0 items-center justify-center',
        sizeClasses[size],
        variantClasses[variant],
        className,
      )}
    >
      <Image
        src="/logo.png"
        alt={alt}
        width={112}
        height={112}
        className={cn(
          'size-full object-contain brightness-0 invert',
          imageClassName,
        )}
        priority={priority}
      />
    </span>
  );
}