/* eslint-disable @next/next/no-img-element -- served through /api/media with our own responsive variants */

import { Building2 } from "lucide-react";
import { cn } from "@/lib/utils";

/**
 * An apartment recognised at a glance. The code stays on the photo because
 * staff speak in codes ("B02 is arriving") even when they picture the room.
 * Falls back to the code alone when an apartment has no photo yet.
 */
export function ApartmentThumb({ imageId, code, className, width = 120, rounded = "rounded-lg", showCode = true }: { imageId?: string | null; code: string; className?: string; width?: number; rounded?: string; showCode?: boolean }) {
  return (
    <span className={cn("relative flex shrink-0 items-center justify-center overflow-hidden bg-surface-2 ring-1 ring-border/70", rounded, className)}>
      {imageId ? (
        <img src={`/api/media/${imageId}?w=${width}`} alt="" className="size-full object-cover" loading="lazy" />
      ) : (
        <Building2 className="size-1/2 text-fg-subtle" aria-hidden />
      )}
      {showCode ? (
        <span className={cn("absolute inset-x-0 bottom-0 truncate px-1 text-center font-mono text-[9px] font-bold leading-[14px] text-white", imageId ? "bg-stone-950/65 backdrop-blur-[2px]" : "bg-stone-950/35")}>{code}</span>
      ) : null}
    </span>
  );
}