import LangLink from "@/components/ui/localization/LangLink";
import { Product } from "@/modules/products/product";
import Image from "next/image";
import PriceWithIcon from "./PriceWithIcon";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import { cn } from "@/lib/utils";

const SecondProductCard = ({
  className,
  product,
  newest,
}: {
  className?: string;
  product: Product;
  newest?: boolean;
}) => {
  const isPopular = product?.MostSelling;
  const text = "best_seller";
  const newText = "newnest-product";

  const { lang } = useCurrentLanguage();

  return (
    <div className={`${className} group hover:scale-105 duration-300`}>
      <div className={`relative h-[200px] overflow-hidden`}>
        {isPopular && (
          <span className="absolute top-2 right-2 bg-mainRed text-xs px-5 py-1 text-white">
            <TranslateClient text={text} />
          </span>
        )}
        {newest && (
          <span
            className={cn(
              "absolute top-2 right-2 bg-orange-600 text-xs px-5 py-1 text-white",
              {
                "right-28": isPopular,
              }
            )}
          >
            <TranslateClient text={newText} />
          </span>
        )}
        <LangLink href={`products/${product?.id}`}>
          <Image
            className="w-full h-full object-cover group-hover:scale-125 duration-500"
            src={product?.images?.[0]?.original_url}
            alt={product?.images?.[0]?.file_name}
            width={500}
            height={500}
          />
        </LangLink>
      </div>

      <div>
        <LangLink
          className="font-semibold line-clamp-2 h-[41px] leading-5 whitespace-pre-wrap break-words mt-4"
          href={`products/${product?.id}`}
        >
          {product?.name?.[lang]}{" "}
        </LangLink>
        <p className="text-sm text-mainGray rtl:pl-5 ltr:pr-5 my-4 h-[20px] line-clamp-1">
          {product?.description?.[lang]}
        </p>
      </div>
      <PriceWithIcon product={product} />
    </div>
  );
};

export default SecondProductCard;