hope-events/frontend/src/components/events/EventCard.tsx

import { ApiImage } from "@/components/shared/ApiImage";
import { Calendar, MapPin } from "lucide-react";
import { ContactButton } from "@/components/events/ContactButton";

 type Event = {
   id: string;
   title: string;
   description?: string;
   startDate: string;
   endDate: string;
   registrationDeadline?: string | null;
   goLiveAt?: string;
   price: number;
   picture?: string;
   isSoldOut?: boolean;
   waitlistEnabled?: boolean;
   requiresRegistration?: boolean;
   contactName?: string | null;
   contactPhone?: string | null;
   contactEmail?: string | null;
   location?: string | null;
};

import { formatDateTimeRange } from "@/lib/date";

export const EventCard = ({ event }: { event: Event }) => {
    const dateRange = formatDateTimeRange(event.startDate, event.endDate);

    return (
        <div className="border rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-brand-200 transition">
            <a href={`/events/${event.id}`} className="block">
                {event.picture ? (
                    <ApiImage src={event.picture} alt={event.title} className="h-48 w-full object-cover" />
                ) : (
                    <div className="h-48 w-full bg-brand-50 flex items-center justify-center">
                        <Calendar className="w-10 h-10 text-brand-200" />
                    </div>
                )}
                <div className="p-4">
                    <h3 className="text-lg font-semibold hover:underline">{event.title}</h3>
                    <p className="text-sm text-gray-500 flex items-center gap-1.5 mt-1">
                        <Calendar className="w-3.5 h-3.5 shrink-0" />
                        {dateRange}
                    </p>
                    {event.location && (
                        <p className="text-sm text-gray-500 flex items-center gap-1.5 mt-1">
                            <MapPin className="w-3.5 h-3.5 shrink-0" />
                            <span className="truncate">{event.location}</span>
                        </p>
                    )}
                    <p className="text-sm text-gray-600 mt-2 line-clamp-2">{event.description}</p>
                </div>
            </a>
            <div className="px-4 pb-4">
                <div className="flex gap-2">
                    <a
                        href={`/events/${event.id}`}
                        className="flex-1 text-center text-sm text-gray-700 border rounded-lg py-2 hover:bg-gray-50 transition-colors"
                    >
                        View details
                    </a>
                    {(() => {
                      if (event.requiresRegistration === false) {
                        return (
                          <ContactButton
                            contactName={event.contactName}
                            contactPhone={event.contactPhone}
                            contactEmail={event.contactEmail}
                          />
                        );
                      }
                      const now = new Date();
                      const end = new Date(event.endDate);
                      const deadline = event.registrationDeadline ? new Date(event.registrationDeadline) : null;
                      const goLive = event.goLiveAt ? new Date(event.goLiveAt) : null;
                      const notYetOpen = goLive ? now < goLive : false;
                      const closed = (deadline ? now >= deadline : false) || now >= end;
                      if (notYetOpen) {
                        return (
                          <button disabled className="flex-1 text-center text-sm text-gray-500 bg-gray-200 rounded-lg py-2 cursor-not-allowed" title="Registration not yet open">
                            Opens {goLive?.toLocaleString()}
                          </button>
                        );
                      }
                      if (closed) {
                        return (
                          <button disabled className="flex-1 text-center text-sm text-gray-500 bg-gray-200 rounded-lg py-2 cursor-not-allowed" title="Registration closed">
                            Registration closed
                          </button>
                        );
                      }
                      if (event.isSoldOut && event.waitlistEnabled) {
                        // Sold out with a waitlist: send them to the event page to join it.
                        return (
                          <a href={`/events/${event.id}`} className="flex-1 text-center text-sm text-brand-700 bg-white border border-brand-300 rounded-lg py-2 hover:bg-brand-50">
                            Sold out — join waitlist
                          </a>
                        );
                      }
                      if (event.isSoldOut) {
                        return (
                          <button disabled className="flex-1 text-center text-sm text-red-700 bg-red-50 border border-red-200 rounded-lg py-2 cursor-not-allowed">
                            Sold Out
                          </button>
                        );
                      }
                      return (
                        <a
                          href={`/register/${event.id}`}
                          className="flex-1 text-center text-sm text-white bg-brand-600 rounded-lg py-2 hover:bg-brand-700 transition-colors"
                        >
                          Register{event.price > 0 ? ` - R${event.price.toFixed(2)}` : ""}
                        </a>
                      );
                    })()}
                </div>
            </div>
        </div>
    );
};