Apple Invites

import { Component, type Event } from "@/components/ui/apple-invites";

const demoEvents: Event[] = [
  {
    id: 1,
    title: "Yoga",
    subtitle: "Sat, June 14, 6:00 AM",
    location: "Central Park",
    backgroundClassName: "bg-gradient-to-br from-orange-400 via-pink-500 to-purple-600",
    badge: "Hosting",
    participants: [{ avatar: "https://i.pravatar.cc/72?img=32" }],
  },
  {
    id: 2,
    title: "Tyler Turns 3!",
    subtitle: "Sat, June 14, 3:00 PM",
    location: "Central Park",
    backgroundClassName: "bg-gradient-to-br from-emerald-400 via-cyan-500 to-blue-600",
    badge: "Going",
    participants: [{ avatar: "https://i.pravatar.cc/72?img=12" }],
  },
  {
    id: 3,
    title: "Golf Party",
    subtitle: "Sun, April 15, 9:00 AM",
    location: "Golf Park",
    backgroundClassName: "bg-gradient-to-br from-lime-400 via-green-500 to-emerald-700",
    badge: "Going",
    participants: [{ avatar: "https://i.pravatar.cc/72?img=8" }],
  },
  {
    id: 4,
    title: "Movie Night",
    subtitle: "Fri, June 20, 8:00 PM",
    location: "Cine Town",
    backgroundClassName: "bg-gradient-to-br from-violet-600 via-fuchsia-600 to-rose-500",
    badge: "Interested",
    participants: [{ avatar: "https://i.pravatar.cc/72?img=47" }],
  },
];

export default function DemoOne() {
  return (
    <div className="flex min-h-[500px] w-full items-center justify-center bg-neutral-50">
      <Component
        cardWidth={{ base: 180, sm: 200, md: 240, lg: 280 }}
        events={demoEvents}
      />
    </div>
  );
}