Buy ticket interface works

app/events/[...eventId]/page.tsx

@@ -1,46 +1,55 @@
 'use client';
-import React from 'react';
-import { useSearchParams } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
 import Header from '../../../components/custom/header';
 import Footer from '../../../components/custom/footer';
 import EventDescription from '../../../components/custom/EventDescription';
 
-// Dummy function to simulate a GET request
-const fetchEventDetails = (eventID: number) => {
-  alert(`Fetching details for event ID: ${eventID}`);
-  // Simulated JSON response for the event
-  return {
-    EventID: eventID,
-    name: 'Example Event Name',
-    date: '2023-12-01',
-    location: 'Example Location',
-    ticketPrice: 100,
-    description: 'Detailed description of the event.',
-    capacity: 300,
-    ticketsSold: 150,
-    imageUrl: [
-      'https://via.placeholder.com/150',
-      'https://via.placeholder.com/150',
-    ],
-    host: 'Example Host',
-    tickets: [1, 2, 3, 4],
-  };
-};
-
 const ListingPage: React.FC = () => {
-  const searchParams = useSearchParams();
-  const eventID = searchParams.get('eventID');
+  const { eventId } = useParams();
+  const [eventDetails, setEventDetails] = useState<any>(null);
 
-  // Simulate fetching data from backend
-  if (eventID) {
-    const eventDetails = fetchEventDetails(Number(eventID));
-    console.log('Event Details:', eventDetails);
-  }
+  useEffect(() => {
+    const fetchEventDetails = async (id: number) => {
+      alert(`Fetching details for event ID: ${id}`);
+      // Dummy Response
+      const details = {
+        EventID: id,
+        name: 'Example Event Name',
+        date: '2023-12-01',
+        location: 'Example Location',
+        ticketPrice: 100,
+        description: 'Detailed description of the event.',
+        capacity: 300,
+        ticketsSold: 295,
+        imageUrl: [
+          'https://via.placeholder.com/150',
+          'https://via.placeholder.com/150',
+        ],
+        host: 'Example Host',
+        tickets: [1, 2, 3, 4],
+      };
+      return details;
+    };
+
+    const getEventDetails = async () => {
+      if (eventId) {
+        const details = await fetchEventDetails(Number(eventId));
+        setEventDetails(details);
+      }
+    };
+
+    getEventDetails();
+  }, [eventId]);
 
   return (
     <>
       <Header />
-      <EventDescription eventId={eventID!} />
+      {eventDetails ? (
+        <EventDescription eventDetails={eventDetails} />
+      ) : (
+        <p>Loading...</p>
+      )}
       <Footer />
     </>
   );

app/events/page.tsx

@@ -17,7 +17,6 @@ interface Event {
   host: string;
 }
 
-// Dummy function to fetch events
 const fetchEvents = (): Event[] => {
   return [
     {
@@ -147,7 +146,7 @@ const EventsPage: React.FC = () => {
   }, []);
 
   const handleEventClick = (eventID: number) => {
-    router.push(`/events/${eventID}`); // You may replace this with a Link from Next.js
+    router.push(`/events/${eventID}`); // Route to the specific event page
   };
 
   return (