interface ImageDisplayProps {
  src: string;
  alt?: string;
  shape?: "square" | "circle" | "full";
  size?: "sm" | "md" | "lg" | "full";
}

const SIZE_MAP = {
  sm: { width: "64px", height: "64px" },
  md: { width: "120px", height: "120px" },
  lg: { width: "200px", height: "200px" },
  full: { width: "100%", height: "auto" },
};

export function ImageDisplay({ src, alt = "", shape = "square", size = "md" }: ImageDisplayProps) {
  const dim = SIZE_MAP[size] || SIZE_MAP.md;
  const borderRadius = shape === "circle" ? "50%" : shape === "full" ? "12px" : "8px";

  return (
    <img
      src={src}
      alt={alt}
      class="object-cover mb-3"
      style={{
        ...dim,
        maxHeight: size === "full" ? "400px" : dim.height,
        borderRadius,
        border: "var(--z-card-border)",
      }}
      onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
    />
  );
}
