Buy ticket interface works

components/custom/ImageCarousel.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-
 import { Card, CardContent } from '@/components/ui/card';
 import {
   Carousel,
@@ -9,17 +8,25 @@ import {
   CarouselPrevious,
 } from '@/components/ui/carousel';
 
-export default function ImageCarousel() {
+interface ImageCarouselProps {
+  images: string[];
+}
+
+const ImageCarousel: React.FC<ImageCarouselProps> = ({ images }) => {
   return (
     <Carousel className="w-full max-w-xs">
       <CarouselContent>
-        {/* map your images here from the page */}
-        {Array.from({ length: 5 }).map((_, index) => (
+        {/* Map over the images array to create CarouselItems */}
+        {images.map((imageUrl, index) => (
           <CarouselItem key={index}>
             <div className="p-1">
               <Card>
                 <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
+                  <img
+                    src={imageUrl}
+                    alt={`Event image ${index + 1}`}
+                    className="w-full h-full object-cover rounded-lg"
+                  />
                 </CardContent>
               </Card>
             </div>
@@ -30,4 +37,6 @@ export default function ImageCarousel() {
       <CarouselNext />
     </Carousel>
   );
-}
+};
+
+export default ImageCarousel;