last page is finishing

app/[lang]/[carType]/[carDeatil]/page.tsx

@@ -1,13 +1,53 @@
-"use client"
+'use client';
 
-import { useCarDetail } from '@/components/lib_components/carDetailProvider'
-import React from 'react'
+import { useCarDetail } from '@/components/lib_components/carDetailProvider';
+import Text from '@/components/lib_components/text';
+import Image from 'next/image';
+import React from 'react';
+
+export default function CarDetailPage() {
+  const { detail } = useCarDetail();
+
+  // 1️⃣ Null holatni boshqarish
+  if (!detail) {
+    return (
+      <div className="my-20 text-center text-gray-500">
+        <Text txt="Mahsulot topilmadi yoki hali tanlanmagan." />
+      </div>
+    );
+  }
 
-export default function page() {
-    const {detail} = useCarDetail();
   return (
-    <div>
-      {detail?.name}
+    <div dir="ltr" className="my-10 max-w-[1200px] w-full mx-auto space-y-5">
+      {/* 2️⃣ Mahsulot nomi */}
+      <div className="text-2xl font-bold w-full text-center text-secondary mb-10">
+        <Text txt={detail.name} />
+      </div>
+
+      <div className="flex flex-col md:flex-row items-start gap-6 justify-between">
+        {/* 3️⃣ Rasmini ko‘rsatish */}
+        <div className="flex-shrink-0">
+          <Image
+            src={detail.image}
+            alt={detail.name}
+            width={400}
+            height={300}
+            className="rounded-lg object-cover border border-gray-200"
+          />
+        </div>
+
+        {/* 4️⃣ Ma’lumotlar bloki */}
+        <div className="space-y-3 flex-1">
+          <div className="text-lg font-semibold">
+            <Text txt="Soatlik narx:" />{' '}
+            {detail.price?.toLocaleString('uz-UZ')} so‘m
+          </div>
+          <div className="text-lg font-semibold">
+            <Text txt="Minimal ijaraga olish vaqti:" /> {detail.min_order_time}{' '}
+            <Text txt="soat" />
+          </div>
+        </div>
+      </div>
     </div>
-  )
+  );
 }

components/carPageParts/carType_head.tsx

@@ -47,9 +47,12 @@ export default function CarType_Header() {
             <Text txt="home" />
           </Link>
           /
-          <div className="text-secondary">
+          <Link href={`/${params.lang}/${params.carType}`} className={params.carDeatil ? "hover:text-secondary hover:cursor-pointer":"text-secondary"}>
             <Text txt={`${params.carType}`} />
-          </div>
+          </Link>
+          {params.carDeatil && '/'}
+          {params.carDeatil &&  <div className="text-secondary">
+            <Text txt={`${params.carType}`} /></div>}
         </div>
       </div>
     </div>

types/index.ts

@@ -1,3 +1,4 @@
+import { Kaimei1 } from "@/assets";
 import { StaticImageData } from "next/image";
 import { SetStateAction } from "react";
 
@@ -49,3 +50,12 @@ export interface innerCardTypes{
   price?:number;
   path:string;
 }
+
+export const defaultDetail : innerCardTypes = {
+  id:1,
+  image:Kaimei1,
+  name:'Mashina topilmadi',
+  min_order_time:4,
+  price:600000,
+  path:''
+}