rewrite phase 6

src/app/calendar/DayEvents.tsx

@@ -1,97 +1,48 @@
 "use client";
 
 import React from "react";
-import { Event } from "../../types";
+import { format } from "date-fns";
+import { Event, TripDataEntry } from "@/types";
+import EventCard from "@/app/event/EventCard";
 
-interface DayEventsProps {
-  date: Date;
+type DayEventsProps = {
   events: Event[];
-  loading: boolean;
-  error: string | null;
-}
+  date: Date;
+  tripData?: Record<string, TripDataEntry>; // Map of event id to trip data
+  className?: string;
+};
 
-const DayEvents: React.FC<DayEventsProps> = ({ date, events, loading, error }) => {
-  const formatDate = (date: Date) => {
-    return date.toLocaleDateString("en-US", {
-      weekday: "long",
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    });
-  };
-
-  if (loading) {
+const DayEvents: React.FC<DayEventsProps> = ({ events, date, tripData = {}, className = "" }) => {
+  const filteredEvents = events.filter((event) => {
+    // Direct Date comparison instead of parseISO
+    const eventDate = new Date(event.eventTime);
     return (
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{formatDate(date)}</h2>
-        </div>
-        <div className="space-y-3">
-          {[1, 2, 3].map((i) => (
-            <div key={i} className="animate-pulse flex space-x-4">
-              <div className="flex-1 space-y-2 py-1">
-                <div className="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4"></div>
-                <div className="h-3 bg-gray-200 dark:bg-gray-700 rounded"></div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
+      eventDate.getDate() === date.getDate() &&
+      eventDate.getMonth() === date.getMonth() &&
+      eventDate.getFullYear() === date.getFullYear()
     );
-  }
+  });
 
-  if (error) {
+  if (filteredEvents.length === 0) {
     return (
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
-        <div className="flex items-center justify-between mb-4">
-          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{formatDate(date)}</h2>
-        </div>
-        <div className="text-red-500 dark:text-red-400 p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">Error: {error}</div>
+      <div className={`text-center py-8 text-gray-500 dark:text-gray-400 ${className}`}>
+        <p>No events scheduled for {format(date, "MMMM d, yyyy")}</p>
       </div>
     );
   }
 
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4">
-      <div className="flex items-center justify-between mb-4">
-        <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{formatDate(date)}</h2>
+    <div className={`space-y-4 ${className}`}>
+      <h3 className="text-lg font-medium text-gray-900 dark:text-white">Events for {format(date, "MMMM d, yyyy")}</h3>
+      <div className="space-y-3">
+        {filteredEvents.map((event) => (
+          <EventCard
+            key={event.id}
+            event={event}
+            tripData={tripData[event.id] || { journeys: [], destName: "", demo: false, loading: false }}
+          />
+        ))}
       </div>
-
-      {events.length === 0 ? (
-        <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-          <p>No events scheduled for this day</p>
-        </div>
-      ) : (
-        <div className="space-y-3">
-          {events.map((event) => {
-            // Format time for display
-            const eventTime = new Date(event.eventTime);
-            const timeString = eventTime.toLocaleTimeString("en-US", {
-              hour: "2-digit",
-              minute: "2-digit",
-            });
-
-            return (
-              <div
-                key={event.id}
-                className="p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:shadow-md transition-shadow"
-              >
-                <div className="flex justify-between items-start">
-                  <div>
-                    <h3 className="font-medium text-gray-900 dark:text-white">{event.title}</h3>
-                    <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
-                      {timeString} • {event.destination}
-                    </p>
-                  </div>
-                  <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100">
-                    {event.source === "calendar" ? "Calendar" : "Manual"}
-                  </span>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
     </div>
   );
 };