import { ImageCard } from "@/components/portfolio/ImageCard";
import prisma from "@/lib/prisma";

export default async function PortfolioOnePage() {
  const images = await prisma.portfolioImage.findMany({
    include: {
      colors: { include: { color: true } },
      variants: true,
    }
  });

  return (
    <main className="p-2">
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
        {images.map((image) => {
          const backgroundColor =
            image.colors.find((c) => c.type === "Muted")?.color?.hex ??
            image.colors.find((c) => c.type === "Vibrant")?.color?.hex ??
            "#e5e7eb";

          return (
            <ImageCard
              key={image.id}
              image={image}
              backgroundColor={backgroundColor}
              variant="square"
            />
          );
        })}
      </div>
    </main>
  );
}