components/main/collections/collection.tsx

import { useMemo } from "react";
import { motion } from "framer-motion";

import { Collection as CollectionType, Image } from "@/utils/type";
import { useInputGeneration } from "@/components/main/hooks/useInputGeneration";
import { arrayBufferToBase64 } from "@/utils";

interface Props {
  index: number;
  collection: Image;
  className?: string;
  onOpen: (id: string) => void;
}

export const Collection: React.FC<Props> = ({
  collection,
  index,
  className,
  onOpen,
}) => {
  const { setPrompt } = useInputGeneration();

  const formatDate = useMemo(() => {
    const date = new Date(collection.createdAt);
    return date.toLocaleDateString();
  }, [collection.createdAt]);

  return (
    <div className={`h-[377px] w-full relative ${className}`}>
      <motion.div
        initial={{ y: 100, opacity: 0 }}
        animate={{ y: 0, opacity: 1 }}
        transition={{
          duration: 0.35,
          delay: (index % 15) * 0.1,
        }}
        className="rounded-[33px] h-[377px] cursor-pointer group overflow-hidden relative z-[1] group"
        onClick={() => onOpen(collection.id)}
      >
        <div className="absolute top-0 left-0 w-full h-full translate-y-full opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 flex items-end p-3">
          <div className="bg-[#292424] backdrop-blur-sm bg-opacity-60 rounded-xl p-3 border-white/20 border w-full">
            <p className="text-xs font-semibold text-white/60 mb-0.5">
              {formatDate}
            </p>
            <p className="text-lg font-medium text-white lowercase leading-snug">
              {collection.prompt?.length > 200
                ? `${collection.prompt.slice(0, 200)}...`
                : collection.prompt}
            </p>
            <p
              className="text-white text-sm text-right font-semibold mt-2"
              onClick={(e) => {
                e.stopPropagation();
                setPrompt(collection.prompt);
              }}
            >
              Try it now
            </p>
          </div>
        </div>
        <div
          style={{
            backgroundImage: `url(https://huggingface.co/datasets/enzostvs/stable-diffusion-tpu-generations/resolve/main/images/${collection.file_name}.png)`,
          }}
          className="rounded-[33px] bg-gray-950 bg-cover absolute top-0 left-0 w-full h-full z-[-1] transition-all duration-200 group-hover:scale-110 bg-center"
        />
      </motion.div>
    </div>
  );
};