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>
-  )
+  );
 }