"use client";

import { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { productProps } from "../types";
import LikeBtn from "./like-btn";
import { AWS_CDN_URL } from "@/utils/staticValues";

export default function ProductThumb({
  title,
  image,
  hoverImg,
  price,
  url,
  designHouse,
  pid,
  showLikeBtn,
  hideDesignHouse,
  wishType = "PRODUCT",
  priority = false,
}: productProps) {
  const setPrice = Math.round(price);

  const [currentImg, setCurrentImg] = useState(image || "");

  const defaultSrc = image ? `${AWS_CDN_URL}/${image}` : "/placeholder.png";
  const hoverSrc =
    hoverImg && hoverImg !== image ? `${AWS_CDN_URL}/${hoverImg}` : defaultSrc;
  const currentSrc = currentImg ? `${AWS_CDN_URL}/${currentImg}` : defaultSrc;

  const canHover = hoverImg && hoverImg !== image;

  return (
    <div className="flex flex-col">
      <div className="group relative z-10 flex w-full">
        <Link
          href={url}
          scroll={false}
          prefetch
          onClick={() => {
            if (typeof window !== "undefined") {
              sessionStorage.setItem(
                "category_scroll_position",
                window.scrollY.toString(),
              );
            }
          }}
          className="relative flex w-full flex-col"
        >
          <div className="relative w-full overflow-hidden">
            <Image
              src={currentSrc}
              alt={title}
              width={360}
              height={450}
              loading={priority ? "eager" : "lazy"}
              priority={priority}
              quality={70}
              sizes="(max-width: 640px) 80vw, (max-width: 1024px) 45vw, 240px"
              className="img-responsive transition-opacity duration-300"
              onMouseEnter={() => canHover && setCurrentImg(hoverImg || image)}
              onMouseLeave={() => setCurrentImg(image || "")}
            />
          </div>
        </Link>

        {showLikeBtn && (
          <div className="absolute top-1 right-1 md:top-2 md:right-2">
            <LikeBtn productId={pid} wishType={wishType} />
          </div>
        )}
      </div>

      {!hideDesignHouse && (
        <p className="flex pt-2 text-xs tracking-wider uppercase">
          {designHouse}
        </p>
      )}

      <div className="flex flex-col justify-between pt-4 pb-5">
        {setPrice > 0 && <div className="font-bogart">${setPrice}</div>}
        <div className="pr-8 text-sm capitalize">{title}</div>
      </div>
    </div>
  );
}