import type { MetroEntry } from "@/types/analytics";

interface Props {
  nearest_name: string | null;
  nearest_walk_minutes: number | null;
  top3: MetroEntry[] | null;
}

export function ObjectMetroList({
  nearest_name,
  nearest_walk_minutes,
  top3,
}: Props) {
  // Build display list: prefer top3 array, fallback to nearest fields
  const entries: MetroEntry[] =
    top3 && top3.length > 0
      ? top3
      : nearest_name
        ? [
            {
              name: nearest_name,
              time: nearest_walk_minutes,
              line: null,
              color: null,
              isWalk: true,
            },
          ]
        : [];

  if (entries.length === 0) {
    return (
      <p style={{ color: "#9ca3af", fontSize: 13 }}>
        Данные о метро отсутствуют.
      </p>
    );
  }

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
      {entries.map((m, i) => (
        <div
          key={`${m.name}-${i}`}
          style={{
            display: "flex",
            alignItems: "center",
            gap: 10,
            padding: "10px 14px",
            background: "#f9fafb",
            borderRadius: 8,
            border: "1px solid #e6e8ec",
          }}
        >
          <span
            style={{
              width: 12,
              height: 12,
              borderRadius: 6,
              background: m.color ?? "#6b7280",
              flexShrink: 0,
              display: "inline-block",
            }}
          />
          <div style={{ flex: 1 }}>
            <div style={{ fontWeight: 500, fontSize: 14 }}>{m.name}</div>
            {m.line ? (
              <div style={{ color: "#5b6066", fontSize: 12 }}>{m.line}</div>
            ) : null}
          </div>
          {m.time != null ? (
            <div
              style={{
                fontSize: 13,
                color: "#5b6066",
                fontVariantNumeric: "tabular-nums",
                whiteSpace: "nowrap",
              }}
            >
              {m.isWalk !== false ? "🚶" : "🚗"} {m.time} мин
            </div>
          ) : null}
        </div>
      ))}
    </div>
  );
}