Checkbox Group

"use client";

import { useState } from "react";
import { CheckboxGroup, CheckboxItem } from "../components/ui/checkbox-group";

const items = ["Email notifications", "Push notifications", "SMS alerts", "Weekly digest", "Monthly report"];

export default function CheckboxNoneCheckedDemo() {
  const [checked, setChecked] = useState<Set<number>>(new Set());

  const toggle = (index: number) => {
    setChecked((prev) => {
      const next = new Set(prev);
      if (next.has(index)) next.delete(index);
      else next.add(index);
      return next;
    });
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-background">
      <CheckboxGroup checkedIndices={checked} className="w-80">
        {items.map((item, i) => (
          <CheckboxItem key={item} label={item} index={i} checked={checked.has(i)} onToggle={() => toggle(i)} />
        ))}
      </CheckboxGroup>
    </div>
  );
}