import Image from 'next/image'
import { cn } from '@/lib/utils'

interface LogoProps {
  variant?: 'small' | 'long'
  className?: string
  showText?: boolean
  textSuffix?: string
}

export function Logo({
  variant = 'small',
  className,
  showText = false,
  textSuffix,
}: LogoProps) {
  if (variant === 'long') {
    return (
      <div className={cn('flex items-center gap-2', className)}>
        <Image
          src="/images/MOPC-blue-long.png"
          alt="MOPC Logo"
          width={120}
          height={40}
          className="h-8 w-auto"
          priority
        />
        {textSuffix && (
          <span className="text-xs text-muted-foreground">{textSuffix}</span>
        )}
      </div>
    )
  }

  return (
    <div className={cn('flex items-center gap-3', className)}>
      <Image
        src="/images/MOPC-blue-small.png"
        alt="MOPC Logo"
        width={32}
        height={32}
        className="h-8 w-8"
        priority
      />
      {showText && (
        <div className="flex items-center gap-1">
          <span className="font-semibold">MOPC</span>
          {textSuffix && (
            <span className="text-xs text-muted-foreground">{textSuffix}</span>
          )}
        </div>
      )}
    </div>
  )
}