import { downloadFile } from "@/core/utils/helpers/file";
import { useImageUpload } from "@/core/utils/hooks/useImageUpload";
import { useCallback, type JSX } from "react";
import { useParams } from "next/navigation";

import Cross from "../Icons/Cross";
import Download from "../Icons/Download";
import Image from "next/image";

interface ImgCardProps {
  image: string;
  date: string;
}

type Params = { modelId?: string };

export default function ImgCard(props: Readonly<ImgCardProps>): JSX.Element {
  const { image, date } = props;
  const { modelId } = useParams<Params>();

  const { deleteImage } = useImageUpload();

  // Memoize the download handler so it's not re-created on every render
  const handleDownload = useCallback(() => {
    downloadFile(image, "");
  }, [image]);

  return (
    <div className="h-[60px] flex justify-between items-center pr-[20px] rounded-[5px] bg-[#FF94241A] overflow-hidden">
      <div className="flex items-center gap-[24px]">
        <div
          className="relative h-[60px] w-[60px] rounded-[5px] flex justify-center items-center overflow-hidden cursor-pointer"
          onClick={handleDownload}
        >
          <Image
            src={image}
            key={image}
            alt="screenshot"
            layout="fill"
            objectFit="cover"
            priority={true}
          />
          <div className="absolute text-gray-700 m-0 p-0">
            <Download width={16} height={16} fill="white" />
          </div>
        </div>
        <div className="m-0 p-0">
          <p className="text-[12px] font-normal leading-[16.8px] text-[#131313]">
            Screenshot {date}
          </p>
        </div>
      </div>
      <button
        className="w-[24px] h-[24px] flex justify-center items-center rounded-full bg-white"
        onClick={modelId ? (() => deleteImage(modelId, image)) : undefined}
      >
        <Cross />
      </button>
    </div>
  );
}