Choice Box

"use client";

import {
  ChoiceBox,
  ChoiceBoxDescription,
  ChoiceBoxItem,
  ChoiceBoxLabel,
} from "@/components/ui/choice-box";

export default function ChoiceBoxDemo() {
  return (
    <div className="mx-auto w-full max-w-md p-4">
      <ChoiceBox
        aria-label="Select a plan"
        selectionMode="single"
        defaultSelectedKeys={["premium"]}
      >
        <ChoiceBoxItem id="premium" textValue="Premium">
          <ChoiceBoxLabel>Premium</ChoiceBoxLabel>
          <ChoiceBoxDescription>
            Advanced options for growing needs.
          </ChoiceBoxDescription>
        </ChoiceBoxItem>
        <ChoiceBoxItem id="deluxe" textValue="Deluxe">
          <ChoiceBoxLabel>Deluxe</ChoiceBoxLabel>
          <ChoiceBoxDescription>
            Top-tier features for maximum performance.
          </ChoiceBoxDescription>
        </ChoiceBoxItem>
        <ChoiceBoxItem id="ultimate" textValue="Ultimate">
          <ChoiceBoxLabel>Ultimate</ChoiceBoxLabel>
          <ChoiceBoxDescription>
            All-inclusive plan with every feature available.
          </ChoiceBoxDescription>
        </ChoiceBoxItem>
        <ChoiceBoxItem id="enterprise" textValue="Enterprise">
          <ChoiceBoxLabel>Enterprise</ChoiceBoxLabel>
          <ChoiceBoxDescription>
            Customized solutions for large organizations.
          </ChoiceBoxDescription>
        </ChoiceBoxItem>
      </ChoiceBox>
    </div>
  );
}