property-management-network/components/shared/logo.tsx

import Link from "next/link"
import Image from "next/image"
import { cn } from "@/lib/utils"

type Size = "sm" | "md" | "lg"
type Theme = "light" | "dark"

// Wordmark lockup height per size — width follows the image's aspect ratio.
const WORDMARK_H: Record<Size, string> = {
  sm: "h-6", // 24px
  md: "h-7", // 28px
  lg: "h-8", // 32px
}

// Square brand-mark box per size.
const MARK_BOX: Record<Size, string> = {
  sm: "h-7 w-7",
  md: "h-8 w-8",
  lg: "h-9 w-9",
}

/** The square brand mark (framework "monster") — used where space is tight, e.g. the collapsed sidebar. */
export function LogoMark({ size = "md", className }: { size?: Size; className?: string }) {
  return (
    <Image
      src="/logo-mark.png"
      alt="Property Management Network"
      width={512}
      height={512}
      priority
      className={cn("shrink-0 rounded-lg object-contain", MARK_BOX[size], className)}
    />
  )
}

/**
 * Full brand wordmark lockup (mark + "Property Management Network").
 * `theme="light"` (default) renders the white wordmark for dark surfaces;
 * `theme="dark"` renders the dark wordmark for light surfaces.
 * Pass `href={null}` to render a non-link version.
 */
export function Logo({
  size = "md",
  theme = "light",
  className,
  href = "/",
}: {
  size?: Size
  theme?: Theme
  className?: string
  href?: string | null
}) {
  const img = (
    <Image
      src={theme === "dark" ? "/logo-dark.png" : "/logo-light.png"}
      alt="Property Management Network"
      width={375}
      height={40}
      priority
      className={cn("w-auto", WORDMARK_H[size])}
    />
  )

  const classes = cn("flex items-center", className)

  return href ? (
    <Link href={href} className={classes} aria-label="Property Management Network">
      {img}
    </Link>
  ) : (
    <div className={classes}>{img}</div>
  )
}