import { downloadFile } from "@/core/utils/helpers/downloadFile";
import { useImageUpload } from "@/core/utils/hooks/useImageUpload";
import { useCallback } from "react";

import Cross from "../Icons/Cross";
import Download from "../Icons/Download";
import Image from "next/image"; // Assuming you're using Next.js for the optimized <Image /> component

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

export default function ImgCard(props: Readonly<ImgCardProps>): JSX.Element {
  const { image, date } = props;
  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}
            alt="screenshot"
            layout="fill" // Automatically adjusts the image size
            objectFit="cover" // Ensures the image covers the container fully
            priority={true} // Ensures the image loads faster if it's above the fold
          />
          <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={() => deleteImage(image)}
      >
        <Cross />
      </button>
    </div>
  );
}