import { type ImagePopupState } from "../types";

export function ImagePopup({ state }: { state: ImagePopupState }) {
  if (!state.showing || !state.image_url) return null;

  return (
    <div className="absolute inset-0 z-20 flex items-center justify-center bg-black/75 backdrop-blur-sm p-12">
      <div className="flex flex-col items-center gap-5 p-6 bg-gray-950/80 rounded-3xl border border-white/10 shadow-2xl max-w-[82vw]">
        {state.caption && (
          <h2 className="text-4xl font-bold text-white tracking-tight text-center">
            {state.caption}
          </h2>
        )}
        <img
          src={state.image_url}
          alt="TV display"
          className="max-w-full max-h-[72vh] rounded-2xl object-contain shadow-xl"
          style={{ display: "block" }}
        />
      </div>
    </div>
  );
}
