import Link from "next/link"
import { Building2 } from "lucide-react"
import { cn } from "@/lib/utils"

type Size = "sm" | "md" | "lg"

const SIZES: Record<Size, { box: string; icon: string; title: string; sub: string; gap: string }> = {
  sm: { box: "h-7 w-7",  icon: "h-4 w-4",       title: "text-xs",     sub: "text-[9px]",  gap: "gap-2" },
  md: { box: "h-8 w-8",  icon: "h-[18px] w-[18px]", title: "text-[13px]", sub: "text-[10px]", gap: "gap-2.5" },
  lg: { box: "h-9 w-9",  icon: "h-5 w-5",       title: "text-[15px]", sub: "text-[11px]", gap: "gap-2.5" },
}

/** The brand mark — gradient rounded square with the building glyph. */
export function LogoMark({ size = "md", className }: { size?: Size; className?: string }) {
  const s = SIZES[size]
  return (
    <div
      className={cn(
        "flex shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-lg shadow-indigo-500/25",
        s.box,
        className
      )}
    >
      <Building2 className={s.icon} />
    </div>
  )
}

/**
 * Full brand lockup: mark + "Property Management" / "Network" wordmark.
 * Designed for the app's dark surfaces (white title, indigo accent).
 * Pass `href={null}` to render a non-link version.
 */
export function Logo({
  size = "md",
  className,
  href = "/",
}: {
  size?: Size
  className?: string
  href?: string | null
}) {
  const s = SIZES[size]

  const content = (
    <>
      <LogoMark size={size} />
      <span className="flex flex-col leading-none">
        <span className={cn("font-bold tracking-tight text-white", s.title)}>Property Management</span>
        <span className={cn("font-semibold uppercase tracking-[0.18em] text-indigo-400", s.sub)}>Network</span>
      </span>
    </>
  )

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

  return href ? (
    <Link href={href} className={classes}>
      {content}
    </Link>
  ) : (
    <div className={classes}>{content}</div>
  )
}