金額内訳AmountBreakdownBeta

import * as React from "react";
import { AmountBreakdown, Card, ToggleGroup, ToggleGroupItem, type AmountLine } from "@gunjo/ui";

const certified = [
  { label: "修理費", amount: 480000 },
  { label: "レッカー費用", amount: 22000 },
  { label: "代車費用", amount: 38000 },
];

export function ClaimPaymentBreakdown() {
  const [fault, setFault] = React.useState("30");
  const certifiedTotal = certified.reduce((sum, line) => sum + line.amount, 0);
  const faultDeduction = Math.round(certifiedTotal * (Number(fault) / 100));
  const deductible = 50000;
  const paid = 100000;
  const payment = certifiedTotal - faultDeduction - deductible - paid;
  const lines: AmountLine[] = [
    { type: "heading", label: "認定損害額" },
    ...certified,
    { type: "subtotal", label: "認定損害額 計", amount: certifiedTotal },
    {
      label: "過失相殺",
      kind: "subtract",
      amount: faultDeduction,
      note: `認定額 × 過失割合 ${fault}%`,
    },
    { label: "免責金額", kind: "subtract", amount: deductible },
    { label: "既払金（内払）", kind: "subtract", amount: paid },
  ];

  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <div className="flex flex-wrap items-center gap-3 text-sm">
        <span className="text-muted-foreground">過失割合</span>
        <ToggleGroup
          type="single"
          value={fault}
          onValueChange={(value) => value && setFault(value)}
          variant="outline"
          size="sm"
          disallowEmpty
          aria-label="過失割合"
        >
          {["0", "20", "30", "50"].map((option) => (
            <ToggleGroupItem
              key={option}
              value={option}
              aria-label={`過失割合 ${option}%`}
            >
              {option}%
            </ToggleGroupItem>
          ))}
        </ToggleGroup>
      </div>

      <Card className="p-5">
        <AmountBreakdown
          lines={lines}
          total={{ label: "今回支払額", amount: payment, tone: payment >= 0 ? "neutral" : "negative" }}
          formula="今回支払額 = 認定損害額 - 過失相殺 - 免責 - 既払金"
        />
      </Card>
    </div>
  );
}