Choice card group

"use client"

import * as React from "react"
import { FileText, MessageSquareMore, Send } from "lucide-react"
import { ChoiceCard, ChoiceCardGroup } from "@/components/candor/ui/choice-card-group"
import { TooltipProvider } from "@/components/candor/ui/tooltip"

// Nothing is chosen until the person chooses: no defaultValue, and null while the app holds the value. A card already
// chosen would nudge people to accept it without reading the others. A card that can't be chosen says why.
export default function Example() {
  const [mode, setMode] = React.useState<string | null>(null)
  return (
    <TooltipProvider>
      <div className="flex w-full max-w-3xl flex-col gap-3">
        <ChoiceCardGroup label="How should the agent reply to new tickets?" value={mode} onValueChange={setMode}>
          <ChoiceCard value="draft" icon={FileText} title="Draft only" description="It writes a reply and leaves it for you to send." />
          <ChoiceCard
            value="ask"
            icon={MessageSquareMore}
            title="Draft and ask"
            description="It writes a reply and asks you before sending it."
            detail="Up to 50 tickets a day"
          />
          <ChoiceCard
            value="send"
            icon={Send}
            title="Send on its own"
            description="It replies without asking."
            locked="Your workspace's policy requires a person to approve replies"
          />
        </ChoiceCardGroup>
        <a href="#plans" className="text-sm text-accent-text underline-offset-4 hover:underline">
          Compare what each mode can do
        </a>
      </div>
    </TooltipProvider>
  )
}