import type { Event } from "@mosaic/shared";
import { formatTime } from "@/lib/utils/date-format";

interface EventCardProps {
  event: Event;
}

export function EventCard({ event }: EventCardProps) {
  return (
    <div className="bg-white p-3 rounded-lg border-l-4 border-blue-500 shadow-sm hover:shadow-md transition-shadow">
      <div className="flex justify-between items-start mb-1">
        <h3 className="font-semibold text-gray-900">{event.title}</h3>
        {event.allDay ? (
          <span className="text-xs text-gray-500 px-2 py-1 bg-gray-100 rounded">All day</span>
        ) : (
          <span className="text-xs text-gray-500">
            {formatTime(event.startTime)}
            {event.endTime && ` - ${formatTime(event.endTime)}`}
          </span>
        )}
      </div>
      {event.description && <p className="text-sm text-gray-600 mb-2">{event.description}</p>}
      {event.location && <p className="text-xs text-gray-500">📍 {event.location}</p>}
    </div>
  );
}