components/main/collections/collection.tsx

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

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

interface Props {
  index: number;
  collection: CollectionType;
  className?: string;
}

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

  const arrayBufferToBase64 = (buffer: ArrayBuffer) => {
    let binary = "";
    const bytes = [].slice.call(new Uint8Array(buffer));
    bytes.forEach((b: any) => (binary += String.fromCharCode(b)));
    return window.btoa(binary);
  };

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

  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"
      >
        <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">
              27 October
            </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={() => 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-125 bg-center"
        />
      </motion.div>
    </div>
  );
};