"use client";
import Image from "next/image";
import { Button } from "@/shared/ui/button";
import React from "react";
import { Product } from "@/shared/types/product";
import { Link } from "@/shared/config/i18n/navigation";
import formatNumberWithSpaces from "@/shared/lib/formatNumberWithSpace";
import { useIsMobile } from "@/shared/hooks/use-mobile";
import { useTranslations } from "next-intl";

interface ProductCardProps {
  product: Product;
}

const ProductCard = ({ product }: ProductCardProps) => {
  const isMobile = useIsMobile();
  const t = useTranslations("");
  return (
    <div className={"bg-white p-5 flex flex-col justify-between"}>
      <div>
        <div className={"relative h-[300px]"}>
          <Image
            className={"mx-auto mb-5"}
            src={isMobile ? product.poster_thumb : product.poster}
            alt={"category"}
            fill
            objectFit={"cover"}
          />
        </div>
        <h3 className="font-bold text-xl my-5">{product.name}</h3>
        <p>
          <b>{t("Narx")}</b>:{" "}
          {product.price_discount ? (
            <span className={"text-destructive line-through"}>
              {formatNumberWithSpaces(product.price_discount)}
            </span>
          ) : null}{" "}
          {formatNumberWithSpaces(product.price)} {t("so'm")}
        </p>
      </div>
      <div className={"text-center"}>
        <Button className={"mt-8 px-16"} asChild>
          <Link href={`/product/${product.id}`}>Batafsil</Link>
        </Button>
      </div>
    </div>
  );
};

export default ProductCard;
