import { HoneycombPattern } from "@/components/honeycomb";
import { Logomark } from "@/components/logomark";

const SURFACES = {
  forest: "bg-forest text-cream",
  cream: "bg-cream text-forest",
  honey: "bg-honey-pale/60 text-forest",
} as const;

/**
 * Platzhalter, solange fuer ein Produkt oder einen Abschnitt kein Foto
 * gepflegt ist. Gestaltet wie das Glas-Etikett: ruhige Flaeche, das
 * gezeichnete Waben-Zeichen und darunter der Name in gesperrten
 * Serif-Versalien — statt eines generischen Farbverlaufs mit Linientextur.
 *
 * In kleinen Groessen (Warenkorb, Galerie-Vorschau) bleibt nur das Zeichen;
 * der Name erscheint erst ab 9rem Breite (Container Query).
 */
export function PlaceholderImage({
  className = "",
  tone = "forest",
  label,
}: {
  className?: string;
  tone?: keyof typeof SURFACES;
  label?: string;
}) {
  return (
    <div className={`@container relative overflow-hidden ${SURFACES[tone]} ${className}`}>
      <HoneycombPattern className="opacity-[0.07]" size={20} fade="radial" />
      <div className="absolute inset-0 flex flex-col items-center justify-center gap-4 p-4 text-center">
        <Logomark
          className="aspect-square h-auto w-[26%] max-w-20 opacity-70"
          variant={tone === "forest" ? "inverted" : "default"}
        />
        {label ? (
          <span className="hidden max-w-[80%] font-serif text-base uppercase leading-snug tracking-[0.2em] opacity-60 @min-[9rem]:line-clamp-2">
            {label}
          </span>
        ) : null}
      </div>
    </div>
  );
}