import { formatHm } from "@/lib/format/date";
import type { DashboardResponse } from "@/lib/types";
import styles from "./SecurityBanner.module.css";

interface SecurityBannerProps {
  alerts: DashboardResponse["security_banner"];
}

/**
 * セキュリティ復帰漏れの警告バナー（モック484〜487行相当）。
 *
 * モックは1件固定の文言だが、実データは複数施設が同時に未解消になりうるため、
 * 配列の全件を表示する（1件に絞ると対応漏れが見えなくなる）。
 */
export function SecurityBanner({ alerts }: SecurityBannerProps) {
  if (alerts.length === 0) return null;

  return (
    <div className={styles.banner}>
      {alerts.map((a, i) => (
        <div key={`${a.facility_name}-${a.section_name}-${i}`} className={styles.line}>
          ⚠ セキュリティ無効: {a.facility_name} {a.section_name}（{formatHm(a.since)}以降）
        </div>
      ))}
    </div>
  );
}