Checkbox

"use client";

import { Checkbox } from "@baseline/ui";
import { useState } from "react";

const options = ["Images", "Captions", "Notes"] as const;

export function ExportSelectionExample() {
  const [selected, setSelected] = useState<ReadonlySet<string>>(() => new Set(["Images", "Notes"]));

  return (
    <div>
      <fieldset className="bl-choice-list">
        <legend>Include in export</legend>
        {options.map((option) => (
          <label className="bl-choice" key={option}>
            <Checkbox
              checked={selected.has(option)}
              name="exportItems"
              onChange={(event) => {
                const next = new Set(selected);
                if (event.currentTarget.checked) next.add(option);
                else next.delete(option);
                setSelected(next);
              }}
              value={option.toLowerCase()}
            />
            <span className="bl-choice__label">{option}</span>
          </label>
        ))}
      </fieldset>
      <p aria-live="polite">
        Included: {options.filter((option) => selected.has(option)).join(", ") || "Nothing"}
      </p>
    </div>
  );
}