"use client"

import Image from "next/image"
import Link from "next/link"

interface LogoProps {
  href?: string
  className?: string
  imageClassName?: string
  height?: number
}

/**
 * PragatiVeer Logo - correctly switches between modes:
 * - Light Mode: Rectangular_light_background.svg (dark/gold text visible on white)
 * - Dark Mode:  Rectangular_dark_background.svg (white text visible on dark)
 */
export function Logo({ href = "/", className = "", imageClassName = "object-contain object-left", height = 56 }: LogoProps) {
  return (
    <Link href={href} className={`hover:opacity-90 transition-opacity block relative ${className}`} style={{ height }}>
      <Image
        src="/PragatiVeer_Logo/SVG_Logos/Rectangular_light_background.svg"
        alt="PragatiVeer"
        fill
        className={`${imageClassName} dark:hidden`}
        priority
      />
      <Image
        src="/PragatiVeer_Logo/SVG_Logos/Rectangular_dark_background.svg"
        alt="PragatiVeer"
        fill
        className={`${imageClassName} hidden dark:block`}
        priority
      />
    </Link>
  )
}