connected to backend

components/cards/productCard.tsx

@@ -1,15 +1,23 @@
 "use client";
 
-import { ProductTypes } from "@/types";
 import Image from "next/image";
 import Link from "next/link";
 import Text from "../lib_components/text";
 import { useParams } from "next/navigation";
 import { motion } from "framer-motion";
+import { useCarType } from "@/store/carType";
 
-export default function ProductCard({ data }: { data: ProductTypes }) {
+export default function ProductCard({ data }: { data: any }) {
   const { lang } = useParams();
 
+  const setInitialCar = useCarType((state) => state.setInitialCar);
+  const carData = {
+    name: data?.name,
+    id: data?.id,
+  };
+
+  console.log("data: ", data);
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 50 }}
@@ -23,14 +31,15 @@ export default function ProductCard({ data }: { data: ProductTypes }) {
       className="rounded-xl border-2 border-primary h-[430px]"
     >
       <Link
-        href={`/${lang}/${data.path}`}
+        href={`/${lang}/${data.name}`}
+        onClick={() => setInitialCar(carData)}
         className="h-full flex flex-col items-center justify-between rounded-lg bg-white transition-transform"
       >
         {/* Yuqori qism - rasm */}
         <div className="rounded-t-lg bg-white py-10 px-2 flex justify-center items-center">
           <Image
             src={data.image}
-            alt={data.truck_name}
+            alt={data.name}
             width={260}
             height={200}
             className="object-contain max-h-[200px] h-full rounded-xl"
@@ -40,10 +49,10 @@ export default function ProductCard({ data }: { data: ProductTypes }) {
         {/* Pastki qism - matn */}
         <div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center space-y-1">
           <div className="font-medium text-primary text-xl text-center">
-            <Text txt={data.truck_name} />
+            <Text txt={data.name} />
           </div>
           <div className="text-secondary text-md font-extrabold text-center">
-            <Text txt={data.desc} />
+            <Text txt="agreement" />
           </div>
           <div className="text-center text-secondary bg-primary max-w-[200px] w-full rounded-xl text-lg py-2 hover:cursor-pointer">
             <Text txt="more" />