/* global React */
// Project image — renders a real <img> from images/{id}-{index}.webp
// with a 1600px -lg variant via srcset for large viewports.

function ProjectImage({ project, index = 0, ratio = "4 / 3", className = "", showMeta = true, style = {}, eager = false }) {
  if (!project) return null;
  const idx = Math.min(index, (project.images || 3) - 1);
  const base = `/images/${project.id}-${idx}`;
  return (
    <div
      className={`ph ${className}`}
      style={{ aspectRatio: ratio, ...style }}
      aria-label={`${project.title} — görsel ${idx + 1}`}
    >
      <img
        src={`${base}.webp`}
        srcSet={`${base}.webp 800w, ${base}-lg.webp 1600w`}
        sizes="(max-width: 760px) 100vw, 50vw"
        alt={`${project.title} — ${project.type || ""}`}
        loading={eager ? "eager" : "lazy"}
        fetchPriority={eager ? "high" : "auto"}
        decoding="async"
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          objectFit: "cover",
        }}
      />
      {showMeta && (
        <div className="ph-meta" style={{ display: "flex", gap: 12, color: "#F4EFE6", opacity: 0.7, mixBlendMode: "screen" }}>
          <span>{String(idx + 1).padStart(2, "0")} / {String(project.images || 3).padStart(2, "0")}</span>
          {project.photographer && <span style={{ opacity: 0.8 }}>{project.photographer}</span>}
        </div>
      )}
    </div>
  );
}

function ProjectThumb({ project, ratio = "1 / 1", className = "", style = {} }) {
  return <ProjectImage project={project} index={0} ratio={ratio} className={className} showMeta={false} style={style} />;
}

window.ProjectImage = ProjectImage;
window.ProjectThumb = ProjectThumb;