"use client";

import { useEventsStore } from "@/hooks/useEventsStore";
import { useOriginStation } from "@/hooks/useOriginStation";
import EventCard from "@/app/event/EventCard";

export default function Home() {
  const { events } = useEventsStore();
  const { station: originStation } = useOriginStation();

  const upcoming = events
    .filter((e) => e.eventTime >= new Date())
    .sort((a, b) => a.eventTime.getTime() - b.eventTime.getTime());

  return (
    <main className="max-w-3xl mx-auto w-full px-4 py-6">
      {upcoming.length === 0 ? (
        <div className="text-center py-16 text-gray-500 dark:text-[#F4F1EA]/60">
          <p className="text-2xl font-bold brand-gradient-text mb-2">No upcoming events</p>
          <p className="text-sm mt-1">Use "Add Event" to add one, or import from the Calendar.</p>
        </div>
      ) : (
        <div className="space-y-4">
          {upcoming.map((event) => (
            <EventCard key={event.id} event={event} originStation={originStation} />
          ))}
        </div>
      )}
    </main>
  );
}