"use client";

import AddToCartButton from "../cart/AddToCartButton";
import Image from "next/image";
import { Product } from "@/modules/products/product";
import React from "react";
import useCurrentLanguage from "@/hooks/useCurrentLanguage";
import TranslateClient from "@/components/ui/localization/TranslateClient";
import ProductStatusChip from "./product-status-chip";
import Price from "../shared/price/price";
import { useRouter } from "next/navigation";

type Props = {
  product: Product;
  className?: string;
};

const ThirdProductCard = ({ className, product }: Props) => {
  const { lang } = useCurrentLanguage();
  const router = useRouter();

  return (
    <div className="p-5 bg-white border rounded-xl w-full max-w-xs xl:max-w-full flex flex-col justify-between">
      <div>
        <div className="flex justify-end">
          <ProductStatusChip
            mostSelling={product.MostSelling}
            count={product.count}
          />
        </div>

        <Image
          src={product?.images?.[0]?.original_url}
          alt="product image"
          width={500}
          height={500}
          className="w-full h-[200px] object-cover my-4 cursor-pointer"
          onClick={()=>router.push(`products/${product.id}`)}
        />

        <div className="text-center mb-5">
          <h2 className="font-bold text-xl mb-2 cursor-pointer" onClick={()=>router.push(`products/${product.id}`)}>{product?.name?.[lang]}</h2>
          <p className="text-slate-400 text-sm mb-4">
            {product?.description?.[lang]}
          </p>
          <div className="flex items-center justify-center gap-3 flex-wrap">
            {product?.colors.map((color) => (
              <span
                key={color?.id}
                className="w-7 h-7 rounded-full border"
                style={{ backgroundColor: color.color_degree }}
              />
            ))}
          </div>
        </div>
      </div>

      <div className="flex flex-col items-center justify-center sm:justify-between gap-4">
        <Price
          priceBeforeDiscount={product?.price}
          priceAfterDiscount={product?.priceAfterDiscount}
        />
        <AddToCartButton product={product} type="iconButton" />
      </div>
    </div>
  );
};

export default ThirdProductCard;