Event Card Component

import { EventCard, Highlight } from "@/components/ui/event-card-component";
import { Calendar, MapPin, Utensils, Globe, Music } from "lucide-react";

// Demo component to showcase EventCard usage
export default function EventCardDemo() {
  // Define the props for the event card based on the user's image
  const eventDetails = {
    title: "FOOD FEST 2025",
    subtitle: "Global Food Festival",
    tagline: "TASTE THE WORLD IN ONE BITE",
    imageUrl: "https://plus.unsplash.com/premium_photo-1670601440146-3b33dfcd7e17?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8Zm9vZHxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=900", // Placeholder image link
    eventDate: "August 1–7, 2025",
    eventLocation: "Beijing International Exhibition Center",
    highlights: [
      {
        icon: <Utensils className="w-5 h-5 text-white" />,
        text: "100+ restaurants participating",
      },
      {
        icon: <Globe className="w-5 h-5 text-white" />,
        text: "50 countries' signature cuisines",
      },
      {
        icon: <Music className="w-5 h-5 text-white" />,
        text: "All-day food stage performances",
      },
    ],
    // Dummy QR code image link
    qrCodeUrl: "https://ik.imagekit.io/fpxbgsota/Untitled.png?updatedAt=1759082788907",
    ctaText: "Scan to buy now",
    ctaSubtitle: "Early bird tickets 20% off",
  };
  
  // A simple mapping for date/location icons to pass into the component structure
  const locationHighlights: Highlight[] = [
    {
      icon: <Calendar className="w-5 h-5 text-white" />,
      text: eventDetails.eventDate
    },
    {
      icon: <MapPin className="w-5 h-5 text-white" />,
      text: eventDetails.eventLocation
    }
  ]

  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-4">
      <EventCard
        title={eventDetails.title}
        subtitle={eventDetails.subtitle}
        tagline={eventDetails.tagline}
        imageUrl={eventDetails.imageUrl}
        eventDate={eventDetails.eventDate}
        eventLocation={eventDetails.eventLocation}
        highlights={eventDetails.highlights}
        // Pass location-specific icons separately if the component expects them this way
        // Here, I've modified the component to accept all highlights in one go
        qrCodeUrl={eventDetails.qrCodeUrl}
        ctaText={eventDetails.ctaText}
        ctaSubtitle={eventDetails.ctaSubtitle}
      />
    </div>
  );
}