import type { MapSummary } from "../lib/types";

function MapCard({ map, onSelect }: { map: MapSummary; onSelect: () => void }) {
  return (
    <div class="trip-card map-index-card" onClick={onSelect}>
      <div class="trip-card-title">{map.title}</div>
      {map.subtitle && <div class="trip-card-subtitle">{map.subtitle}</div>}
      {map.count != null && (
        <div class="trip-card-meta">
          <span class="map-count-badge">{map.count} places</span>
        </div>
      )}
    </div>
  );
}

export function MapIndex({ maps, onSelect }: {
  maps: MapSummary[];
  onSelect: (id: string) => void;
}) {
  return (
    <div class="trip-index">
      <h1 class="trip-index-heading">Maps</h1>
      {maps.length === 0 && (
        <div class="empty-state">No maps yet.</div>
      )}
      <div class="trip-index-list">
        {maps.map(m => (
          <MapCard key={m.id} map={m} onSelect={() => onSelect(m.id)} />
        ))}
      </div>
    </div>
  );
}