Translation request for 2693

[emmzyrayz]

Error Text

'CartItem' only refers to a type, but is being used as a value here.

Supporting Information

Please provide other information which led to this error, and any specific questions you have about it:

Here is my full code

"use client";

import Image from "next/image";
import {
FaHeart,
FaRegHeart,
FaEye,
FaRegEye,
FaRegStar,
FaStar,
FaStarHalf,
} from "react-icons/fa";
import "./prod-card.css";
import {useState} from "react";
import React from "react";
import {useRouter} from "next/navigation";
import {Product} from "@/types/product";
import {useCart} from "@/context/commerce logic/cartcontext";
// import Link from "next/link";
import { CartItem } from '../../context/commerce logic/cartcontext';

type ProductCardProps = {
product: Product;
filterTag: string;
};

const renderStars = (rating: number) => {
const fullStars = Math.floor(rating); // Full stars
const halfStars = rating % 1 >= 0.5 ? 1 : 0; // Half star if applicable
const emptyStars = 5 - fullStars - halfStars; // Remaining empty stars

const stars = [];

// Add full stars
for (let i = 0; i < fullStars; i++) {
stars.push(<FaStar key={full-${i}} className="fa-star" />);
}

// Add half star
if (halfStars) {
stars.push(

);
}

// Add empty stars
for (let i = 0; i < emptyStars; i++) {
stars.push(<FaRegStar key={empty-${i}} className="fa-star" />);
}

return stars;
};

const ProductRating = ({rating}: {rating: number}) => {
const ratting = rating ?? 0;

return (

{renderStars(ratting)}

);
};

export const ProductCard = ({product, filterTag}: ProductCardProps) => {
const {addToCart} = useCart();
const [hearted, setHearted] = useState(false); // Single state for heart icon
const [eyed, setEyed] = useState(false); // Single state for eye icon
const router = useRouter();

// Handlers no longer need an index, just toggle states
const handleHeartClick = () => {
setHearted(!hearted);
};

const handleEyeClick = () => {
setEyed(!eyed);
};

const handleViewItemClick = () => {

if (!product._id) {
  console.error("Product ID is undefined:", product);
  return;
}

// Use the correct ID field from your product object
const productId = product._id;
const url = `/${filterTag}/${productId}`;
console.log("Navigating to:", url);
router.push(url);

};

const handleAddToCart = (product: Product) => {
addToCart(CartItem);
// alert(${product.name} added to cart!);
// You can add a notification here to show the item was added
};

return (
<>

{product.discount}%

{hearted ? (

) : (

)}

{eyed ? : }

<div className="product_btn" onClick={() => handleAddToCart(product)}>
Add To Cart

{product.name}

${(product.price * (1 - product.discount / 100)).toFixed(2)}

${product.price}

{" "}
{/* Rating as a number */}

({product.rating?.toFixed(1) ?? "N/A"})

View Item

</>
);
};