import LangLink from "@/components/ui/localization/LangLink";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import { cn } from "@/lib/utils";
import { Product } from "@/modules/products/product";
import Image from "next/image";
import AddToCartButton from "../cart/AddToCartButton";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import Price from "../shared/price/price";
type Props = {
  product: Product;
  className?: string;
};
const FirstProductCard = ({ className, product }: Props) => {
  const classes = cn("border border-gray-200 rounded-3xl p-5 group", className);

  const { lang } = useCurrentLanguage();

  return (
    <div className={classes}>
      {/* image of card */}
      <LangLink href={`products/${product?.id}`}>
        <div className={`relative h-[200px] overflow-hidden`}>
          {product?.MostSelling ? (
            <span className="absolute top-2 right-2 bg-mainLime text-xs px-5 py-1 rounded-[9px] z-10">
              <TranslateClient text="best_seller" />
            </span>
          ) : (
            ""
          )}
          <Image
            className="w-full h-full object-cover group-hover:scale-125 duration-500 rounded-[9px]"
            src={product?.images?.[0]?.original_url}
            alt="product1"
            width={500}
            height={500}
          />
        </div>
      </LangLink>

      {/* details of card */}
      <div>
        <h3 className="font-semibold line-clamp-2 h-[41px] leading-5 whitespace-pre-wrap break-words mt-4">
          {product?.name?.[lang]}
        </h3>
        {/* <p className="text-mainGray rtl:pl-5 ltr:pr-5 my-4 h-[50px] truncate"> */}
        <p className="text-sm text-mainGray rtl:pl-5 ltr:pr-5 my-4 h-[20px] line-clamp-1">
          {product?.description?.[lang]}
        </p>
        <Price
          className="mb-6"
          priceBeforeDiscount={product.price}
          priceAfterDiscount={product.priceAfterDiscount}
        />
        <AddToCartButton product={product} />
      </div>
    </div>
  );
};

export default FirstProductCard;