有効期限ExpiryBadgeExperimental

import * as React from "react";
import { ExpiryBadge, MetadataList, Slider, classifyExpiry } from "@gunjo/ui";

const today = "2026-06-28";
const expiryBadgeAlignClass = "w-[244px] justify-end";
const expiryBadgeStateClass = "w-20 shrink-0 justify-start";
const expiryLabels = {
  valid: "有効",
  expiring: "期限間近",
  expired: "失効",
  missing: "未登録",
} as const;

function formatExpiryRemaining(days: number) {
  if (days < 0) return Math.abs(days) + "日超過";
  if (days === 0) return "本日まで";
  return "残" + days + "日";
}

export function ComplianceExpiryList() {
  const [warnWithinDays, setWarnWithinDays] = React.useState(30);
  const rows = [
    { label: "普通二種免許", value: "2029-03-15" },
    { label: "適性診断（適齢）", value: "2026-07-20" },
    { label: "健康診断", value: "2026-06-10" },
    { label: "地理試験合格証", value: null },
  ];
  const assessment = classifyExpiry("2026-07-20", { today, warnWithinDays });

  return (
    <div className="flex w-full max-w-xl flex-col gap-4 rounded-lg border bg-card p-4">
      <Slider
        min={7}
        max={90}
        step={1}
        value={warnWithinDays}
        onValueChange={setWarnWithinDays}
        aria-label="期限間近の判定日数"
      />
      <p className="text-xs text-muted-foreground">
        適性診断は {assessment.days} 日後に期限を迎えます。現在の判定は「{expiryLabels[assessment.state]}」です。
      </p>
      <MetadataList
        items={rows.map((row) => ({
          label: row.label,
          value: (
            <ExpiryBadge
              value={row.value}
              today={today}
              warnWithinDays={warnWithinDays}
              labels={expiryLabels}
              formatRemaining={formatExpiryRemaining}
              className={expiryBadgeAlignClass}
              stateClassName={expiryBadgeStateClass}
              statePosition="end"
            />
          ),
        }))}
      />
    </div>
  );
}