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 bufferToBase64 = useMemo(() => {
    const base64Flag = "data:image/jpeg;base64,";
    const imageStr = arrayBufferToBase64(collection.blob.data);
    return base64Flag + imageStr;
  }, [collection]);

  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 * 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}
            </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(${bufferToBase64})`,
          }}
          className="rounded-[33px] bg-red-400 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>
  );
};