import type { LegacyAlarm } from "../../features/legacyDashboard/model/types";

export function AlarmsPanel({ alarms, onSelectMmsi }: { alarms: LegacyAlarm[]; onSelectMmsi?: (mmsi: number) => void }) {
  if (alarms.length === 0) {
    return <div style={{ fontSize: 11, color: "var(--muted)" }}>(현재 경고 없음)</div>;
  }

  return (
    <div>
      {alarms.map((a, idx) => (
        <div
          key={`${a.kind}-${a.relatedMmsi.join("-")}-${a.timeLabel}-${idx}`}
          className={`ai ${a.severity}`}
          onClick={() => {
            if (!onSelectMmsi) return;
            const m = a.relatedMmsi[0];
            if (typeof m === "number") onSelectMmsi(m);
          }}
          style={{ cursor: onSelectMmsi ? "pointer" : undefined }}
          title={onSelectMmsi ? "클릭: 관련 선박 선택" : undefined}
        >
          <span className="at">{a.timeLabel}</span>
          <span style={{ flex: 1 }}>{a.text}</span>
        </div>
      ))}
    </div>
  );
}
