import Image from "next/image";
import FilteredLightbox from "@/components/lightbox";
import { trpc } from "@/trpc/server";
import { TRPCProvider } from "@/trpc/client";

export default async function Photos(): Promise<React.JSX.Element> {
  const { data: images } = await trpc.photos.list();

  return (
    <div className="mx-auto">
      <TRPCProvider>
        <FilteredLightbox imageData={images}>
          {images.map((image) => (
            <Image
              key={image.src}
              alt={image.src}
              src={image.src}
              className="object-contain h-60 w-80"
              sizes="100vw"
              loading="lazy"
              width={image.width}
              height={image.height}
              blurDataURL={image.blur}
              placeholder="blur"
            />
          ))}
        </FilteredLightbox>
      </TRPCProvider>
    </div>
  );
}
