Choicebox Controlled

"use client"

import { useState } from "react"
import type { Selection } from "react-aria-components"
import { ChoiceBox, ChoiceBoxItem } from "@/components/ui/choice-box"
import { Description } from "@/components/ui/field"

export default function ChoiceboxControlledDemo() {
  const [selectedKeys, setSelectedKeys] = useState<Selection>(new Set([packages[0].id]))
  return (
    <>
      <ChoiceBox
        aria-label="Select packages"
        selectionMode="multiple"
        selectedKeys={selectedKeys}
        onSelectionChange={setSelectedKeys}
        items={packages}
      >
        {(item) => <ChoiceBoxItem textValue={item.label} {...item} />}
      </ChoiceBox>

      <Description className="mt-2 block text-muted-fg [&>strong]:text-fg">
        You have selected: <strong>{Array.from(selectedKeys).join(", ")}</strong>
      </Description>
    </>
  )
}

const packages = [
  {
    id: "sm",
    label: "Small",
    description: "Perfect for beginners. Basic resources for light projects.",
  },
  {
    id: "md",
    label: "Medium",
    description: "Great for growing sites. More power and storage.",
  },
  {
    id: "lg",
    label: "Large",
    description: "Ideal for busy sites. Lots of resources and support.",
  },
  {
    id: "xl",
    label: "Extra Large",
    description: "Max power for demanding applications. Top-tier performance.",
  },
] as const