import Image from "next/image";
import FilteredLightbox from "@/app/_components/lightbox";
import { api } from "@/trpc/server";

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

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