import ImageCard from "@/components/images/ImageCard";
import { ColorPalette, ColorPaletteItem, Image, ImagePalette, ImageVariant } from "@/generated/prisma";

type PaletteWithItems = ColorPalette & {
  items: ColorPaletteItem[],
  images: (ImagePalette & {
    image: Image & {
      variants: ImageVariant[]
    }
  })[]
}

export default function DisplayPalette({ palette }: { palette: PaletteWithItems }) {


  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-2xl font-bold">{palette.name}</h1>
        {/* <p className="text-muted-foreground">Type: {palette.type}</p> */}
      </div>

      <div className="flex flex-wrap gap-2">
        {palette.items.map((item) => (
          <div
            key={item.id}
            className="w-10 h-10 rounded-full border"
            style={{ backgroundColor: item.hex ?? "#ccc" }}
            title={item.hex ?? "n/a"}
          />
        ))}
      </div>

      <div>
        <h2 className="text-xl font-semibold">Used by {palette.images.length} image(s)</h2>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-2">
          {palette.images.map((image) => (
            <ImageCard key={image.id} image={image} />
          ))}
        </div>
      </div>
    </div>
  );
}