stack/apps/web/src/components/federation/FederatedEventCard.tsx

/**
 * FederatedEventCard Component
 * Displays an event from a federated instance with provenance indicator
 */

import type { FederatedEvent } from "./types";
import { ProvenanceIndicator } from "./ProvenanceIndicator";

interface FederatedEventCardProps {
  federatedEvent: FederatedEvent;
  compact?: boolean;
  onClick?: () => void;
}

/**
 * Format time for display
 */
function formatTime(date: Date): string {
  return new Intl.DateTimeFormat("en-US", {
    hour: "numeric",
    minute: "2-digit",
    hour12: true,
  }).format(new Date(date));
}

/**
 * Format date for display
 */
function formatDate(date: Date): string {
  return new Intl.DateTimeFormat("en-US", {
    weekday: "short",
    month: "short",
    day: "numeric",
  }).format(new Date(date));
}

export function FederatedEventCard({
  federatedEvent,
  compact = false,
  onClick,
}: FederatedEventCardProps): React.JSX.Element {
  const { event, provenance } = federatedEvent;

  const paddingClass = compact ? "p-3" : "p-4";
  const clickableClass = onClick ? "cursor-pointer hover:border-gray-300" : "";

  const startTime = formatTime(event.startTime);
  const endTime = event.endTime !== null ? formatTime(event.endTime) : "";
  const startDate = formatDate(event.startTime);

  return (
    <div
      className={`border border-gray-200 rounded-lg ${paddingClass} ${clickableClass} transition-colors`}
      onClick={onClick}
    >
      {/* Header with title and provenance */}
      <div className="flex items-start justify-between mb-2">
        <div className="flex-1">
          <h3 className="text-base font-medium text-gray-900">{event.title}</h3>
          {event.description && <p className="text-sm text-gray-600 mt-1">{event.description}</p>}
        </div>
        <ProvenanceIndicator
          instanceId={provenance.instanceId}
          instanceName={provenance.instanceName}
          instanceUrl={provenance.instanceUrl}
          compact={compact}
        />
      </div>

      {/* Metadata row */}
      <div className="flex items-center gap-3 text-sm flex-wrap">
        {/* Date */}
        <span className="text-xs text-gray-700 font-medium">{startDate}</span>

        {/* Time */}
        {event.allDay ? (
          <span className="text-xs text-gray-600">All day</span>
        ) : (
          <span className="text-xs text-gray-600">
            {startTime} - {endTime}
          </span>
        )}

        {/* Location */}
        {event.location && (
          <span className="text-xs text-gray-600">
            <span className="mr-1">📍</span>
            {event.location}
          </span>
        )}
      </div>
    </div>
  );
}