export type LogoMarkVariant = 'nav' | 'footer' | 'square'

export interface LogoMarkProps {
  /** nav/footer: full wordmark; square: compact icon tile */
  variant?: LogoMarkVariant
  className?: string
}

const LOGO_SRC = '/logo.png'

export function LogoMark({ variant = 'nav', className = '' }: LogoMarkProps) {
  const isDecorative = variant === 'nav' || variant === 'footer'

  return (
    <span
      className={['logo-mark', `logo-mark--${variant}`, className].filter(Boolean).join(' ')}
      aria-hidden={isDecorative || undefined}
    >
      <img
        src={LOGO_SRC}
        alt={isDecorative ? '' : 'Miracles in Motion Foundation'}
        className="logo-mark__img"
        width={1024}
        height={1024}
        decoding="async"
        fetchPriority={variant === 'nav' ? 'high' : undefined}
      />
    </span>
  )
}

export default LogoMark