Fold panel

import { useState } from "react"
import { FoldPanel, type FoldSection } from "@/components/ui/fold-panel"
import { SegmentedControl } from "@/components/ui/segmented-control"

const dl = (rows: readonly (readonly [string, string])[]) => (
  <dl>
    {rows.map(([term, value]) => (
      <div key={term}>
        <dt>{term}</dt>
        <dd>{value}</dd>
      </div>
    ))}
  </dl>
);

const order: FoldSection[] = [
  { id: "shipping", title: "Shipping", summary: "2 Rosewood Lane, Halden", content: dl([["Address", "2 Rosewood Lane, 1780 Halden"], ["Method", "Tracked, 2 days"], ["Cost", "$6.00"]]) },
  { id: "payment", title: "Payment", summary: "Visa ending 4821", content: dl([["Card", "Visa ending 4821"], ["Billing name", "Mira Solheim"], ["Charge date", "On dispatch"]]) },
  { id: "billing", title: "Billing address", summary: "Same as shipping", content: dl([["Address", "Same as shipping"], ["VAT number", "NO 912 345 678"]]) },
  { id: "notes", title: "Notes", summary: "Leave with neighbour", content: dl([["For the courier", "Leave with the neighbour at number 4 if nobody answers"]]) },
];

export function FoldPanelDemo() {
  const [type, setType] = useState<"single" | "multiple">("single");
  const [open, setOpen] = useState<string[]>(["shipping"]);
  return (
    <div className="grid w-full max-w-md justify-items-center gap-3">
      <SegmentedControl label="How many open" value={type} onValueChange={(v) => setType(v === "multiple" ? "multiple" : "single")} options={[{ value: "single", label: "One open" }, { value: "multiple", label: "Several open" }]} />
      <div className="w-full">
        <FoldPanel sections={order} type={type} value={open} onValueChange={setOpen} />
      </div>
    </div>
  );
}