複数選択カードCheckboxCardExperimental

import * as React from "react";
import { Badge, CheckboxCard, CheckboxCardGroup } from "@gunjo/ui";

const addons = [
  { value: "insurance", title: "Travel insurance", description: "Injury & cancellation cover", price: "$5", tag: <Badge variant="info">Popular</Badge> },
  { value: "seat", title: "Seat selection", description: "Choose window or aisle", price: "$3" },
  { value: "meal", title: "In-flight meal", description: "Japanese or Western", price: "$12", highlight: "$2 off when pre-ordered" },
  { value: "lounge", title: "Lounge access", description: "One departure lounge visit", price: "$20", disabled: true, disabledReason: "Not available on this plan." },
];

export function AddonPicker() {
  const [selected, setSelected] = React.useState<string[]>(["insurance"]);
  return (
    <CheckboxCardGroup value={selected} onValueChange={setSelected} aria-label="Add-ons" name="addons">
      {addons.map((a) => (
        <CheckboxCard
          key={a.value}
          value={a.value}
          title={a.title}
          description={a.description}
          price={a.price}
          tags={a.tag}
          highlight={a.highlight}
          disabled={a.disabled}
          disabledReason={a.disabledReason}
        />
      ))}
    </CheckboxCardGroup>
  );
}