src/frontend/app/components/arrivals/ArrivalList.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

import React from "react";
import { useTranslation } from "react-i18next";
import { type Arrival } from "../../api/schema";
import { ArrivalCard } from "./ArrivalCard";
import { ReducedArrivalCard } from "./ReducedArrivalCard";

interface ArrivalListProps {
  arrivals: Arrival[];
  reduced?: boolean;
  onArrivalClick?: (arrival: Arrival) => void;
  onTrackArrival?: (arrival: Arrival) => void;
  trackedTripId?: string;
}

export const ArrivalList: React.FC<ArrivalListProps> = ({
  arrivals,
  reduced,
  onArrivalClick,
  onTrackArrival,
  trackedTripId,
}) => {
  const { t } = useTranslation();
  const clickable = Boolean(onArrivalClick);

  return (
    <div className="flex flex-col flex-1 gap-3">
      {arrivals.length === 0 && (
        <div className="text-center text-muted mt-16">
          {t("estimates.none", "No hay llegadas próximas disponibles para esta parada.")}
        </div>
      )}
      {arrivals.map((arrival, index) =>
        reduced ? (
          <ReducedArrivalCard
            key={`${arrival.tripId}-${index}`}
            arrival={arrival}
            onClick={clickable ? () => onArrivalClick?.(arrival) : undefined}
          />
        ) : (
          <ArrivalCard
            key={`${arrival.tripId}-${index}`}
            arrival={arrival}
            onClick={clickable ? () => onArrivalClick?.(arrival) : undefined}
            onTrack={onTrackArrival ? () => onTrackArrival(arrival) : undefined}
            isTracked={trackedTripId === arrival.tripId}
          />
        )
      )}
    </div>
  );
};