レベル表示StatusLevelExperimental

import {
  ListCard,
  StatusLevel,
  compareStatusLevel,
  highestStatusLevel,
} from "@gunjo/ui";

// 段は軽い順に1回だけ書く。並べ替えも全体の導出もこの配列から引く。
const SERVICE_LEVELS = [
  { value: "normal", label: "平常運転", tone: "success" },
  { value: "delay", label: "遅延", tone: "warning" },
  { value: "detour", label: "迂回", tone: "warning" },
  { value: "suspended", label: "運休", tone: "destructive" },
] as const;

const ROUTES = [
  { id: "ke96", name: "品96 品川駅港南口〜八潮パークタウン", note: "平常どおり", level: "normal" },
  { id: "ke98", name: "品98 品川駅港南口〜大井競馬場前", note: "工事のため迂回", level: "detour" },
  { id: "ke99", name: "品99 品川駅高輪口〜五反田駅", note: "終日運休", level: "suspended" },
] as const;

export function ServiceStatusList() {
  // 重い順（運休が上）。
  const sorted = [...ROUTES].sort((a, b) =>
    compareStatusLevel(SERVICE_LEVELS, b.level, a.level),
  );
  // 全体の運行状況＝いちばん重い段。
  const overall = highestStatusLevel(SERVICE_LEVELS, ROUTES.map((r) => r.level));

  return (
    <div className="flex flex-col gap-2">
      {sorted.map((route) => (
        <ListCard
          key={route.id}
          title={route.name}
          description={route.note}
          status={<StatusLevel levels={SERVICE_LEVELS} value={route.level} />}
        />
      ))}
      <p>全体：<StatusLevel levels={SERVICE_LEVELS} value={overall} /></p>
    </div>
  );
}