import { LandingShell } from "@/components/landing/shell";
import type { LandingProps } from "@/components/landing/types";
import { imageDataSchema } from "@/lib/qr/types/image";

export function ImageLanding({ data }: LandingProps) {
  const { title, description, images } = imageDataSchema.parse(data);

  return (
    <LandingShell title={title || "Bilder"} subtitle={description || null}>
      <div className="space-y-4">
        {images.map((image, index) => (
          <figure
            key={image.fileId}
            className="overflow-hidden rounded-2xl border border-slate-200 bg-surface shadow-sm"
          >
            {/* eslint-disable-next-line @next/next/no-img-element -- eigene
                Auslieferung ohne bekannte Maße; der Optimierer von Next
                brächte hier nichts. */}
            <img
              src={`/api/uploads/${image.fileId}`}
              alt={image.caption || `Bild ${index + 1}`}
              // Das erste Bild sieht man sofort, die übrigen erst beim Scrollen.
              loading={index === 0 ? "eager" : "lazy"}
              className="block w-full"
            />
            {image.caption ? (
              <figcaption className="border-t border-slate-100 px-4 py-3 text-sm text-slate-600">
                {image.caption}
              </figcaption>
            ) : null}
          </figure>
        ))}
      </div>
    </LandingShell>
  );
}