Buy ticket interface works

components/custom/EventDescription.tsx

@@ -9,43 +9,63 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import ImageCarousel from './ImageCarousel';
-import TicketButton from './TicketButton';
 import { buyHandler } from '@/lib/buyHandler';
 import { useToast } from '@/hooks/use-toast';
+import NumberPicker from './TicketButton';
 
-const EventDescription = ({ eventId }: { eventId: string }) => {
+interface EventDescriptionProps {
+  eventDetails: {
+    EventID: number;
+    name: string;
+    date: string;
+    location: string;
+    ticketPrice: number;
+    description: string;
+    capacity: number;
+    ticketsSold: number;
+    imageUrl: string[];
+    host: string;
+  };
+}
+
+const EventDescription: React.FC<EventDescriptionProps> = ({
+  eventDetails,
+}) => {
   const { toast } = useToast();
   const handleBuyNow = () => {
-    buyHandler(Number(eventId), toast);
+    buyHandler(eventDetails.EventID, toast);
   };
 
   return (
     <Card className="pt-10 pb-16 px-6 bg-gradient-to-r from-blue-50 to-gray-50 rounded-xl shadow-lg max-w-4xl mx-auto">
       <CardHeader className="flex flex-col items-start space-y-4">
-        <h1 className="text-3xl font-semibold text-gray-800">TicketTitle</h1>
+        <h1 className="text-3xl font-semibold text-gray-800">
+          {eventDetails.name}
+        </h1>
         <Badge
           variant="outline"
           className="text-blue-600 bg-blue-100 px-3 py-1 rounded-full"
         >
-          Price: $99
+          Price: ${eventDetails.ticketPrice}
         </Badge>
       </CardHeader>
 
       <CardContent className="flex flex-col md:flex-row items-start space-y-8 md:space-y-0 md:space-x-10">
         <div className="md:w-1/2 flex justify-center">
-          <ImageCarousel />
+          <ImageCarousel images={eventDetails.imageUrl} />
         </div>
         <div className="md:w-1/2 text-gray-700">
           <Separator className="my-4" />
-          <p className="leading-relaxed">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem
-            ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
-            tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum
-            dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor
-            incididunt ut labore et dolore magna aliqua.
-          </p>
+          <p className="leading-relaxed">{eventDetails.description}</p>
           <Separator className="my-4" />
+          <p>Location: {eventDetails.location}</p>
+          <p>Date: {eventDetails.date}</p>
+          <p>Host: {eventDetails.host}</p>
+          {eventDetails.ticketsSold / eventDetails.capacity >= 0.9 && (
+            <div className="mt-2 p-2 bg-yellow-300 text-black rounded">
+              Limited Tickets Remaining!
+            </div>
+          )}
         </div>
       </CardContent>
 
@@ -58,7 +78,9 @@ const EventDescription = ({ eventId }: { eventId: string }) => {
           Buy now Using MetaMask
         </Button>
         <div className="relative md:left-5">
-          <TicketButton />
+          <NumberPicker
+            max={eventDetails.capacity - eventDetails.ticketsSold}
+          />
         </div>
       </CardFooter>
     </Card>