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;
   // Set by GET /api/events while an early-bird tier is still running.
   earlyBirdEndsAt?: string | null;
   scheduleType?: "single" | "sessions";
   sessions?: EventSession[];
   registrationClosesAt?: string;
};

import { formatDateTimeRange } from "@/lib/date";
import { registrationClosesAt, scheduleSummary } from "@/lib/sessions";
import type { EventSession } from "@/types";

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

    const now = new Date();
    const goLive = event.goLiveAt ? new Date(event.goLiveAt) : null;
    // Multi-day events close when the first session starts (or later with late joining).
    const closesAt = registrationClosesAt(event);
    const registrationOpen = event.requiresRegistration !== false
      && !(goLive && now < goLive)
      && now < closesAt;
    const showEarlyBird = !!event.earlyBirdEndsAt && registrationOpen && !event.isSoldOut;

    return (
        <div className="relative border rounded-xl overflow-hidden shadow-sm hover:shadow-md hover:border-brand-200 transition">
            {showEarlyBird && (
                <div className="pointer-events-none absolute top-0 right-0 z-10 h-32 w-32 overflow-hidden" aria-hidden="true">
                    <div className="absolute top-[26px] -right-[38px] w-[150px] rotate-45 bg-amber-400 py-1 text-center text-xs font-bold uppercase tracking-wide text-amber-950 shadow-md">
                        Early bird
                    </div>
                </div>
            )}
            <a href={`/events/${event.id}`} className="block">
                {showEarlyBird && (
                    <span className="sr-only">
                        Early bird pricing until {new Date(event.earlyBirdEndsAt!).toLocaleDateString("en-GB", { day: "numeric", month: "long" })}.
                    </span>
                )}
                {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 notYetOpen = goLive ? now < goLive : false;
                      const closed = now >= closesAt;
                      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>
    );
};