Questionnaire

"use client"

import * as React from "react"

import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireChoice,
  QuestionnaireChoiceDescription,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireProgress,
  QuestionnaireSubmit,
  QuestionnaireTitle,
} from "@/components/ui/questionnaire"

// A few questions, one at a time, as an assistant might ask them.
export default function QuestionnaireDemo() {
  const [done, setDone] = React.useState<string | null>(null)

  if (done) {
    return <p className="text-mac-body text-mac-label-secondary">Thanks! You chose: {done}</p>
  }

  return (
    <Questionnaire
      className="w-full max-w-md"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        setDone([data.get("platform"), data.get("name")].filter(Boolean).join(", "))
      }}
    >
      <QuestionnaireProgress />
      <QuestionnaireItem name="platform" required>
        <QuestionnaireTitle>What are you building?</QuestionnaireTitle>
        <QuestionnaireDescription>Pick the one closest to your project.</QuestionnaireDescription>
        <QuestionnaireChoices>
          <QuestionnaireChoice value="Mac app">
            A Mac app
            <QuestionnaireChoiceDescription>Native, with SwiftUI or AppKit.</QuestionnaireChoiceDescription>
          </QuestionnaireChoice>
          <QuestionnaireChoice value="Web app">
            A web app
            <QuestionnaireChoiceDescription>That should feel like a Mac app.</QuestionnaireChoiceDescription>
          </QuestionnaireChoice>
        </QuestionnaireChoices>
      </QuestionnaireItem>
      <QuestionnaireItem name="name">
        <QuestionnaireTitle>What is it called?</QuestionnaireTitle>
        <QuestionnaireInput placeholder="Untitled" />
      </QuestionnaireItem>
      <QuestionnaireActions>
        <QuestionnairePrevious />
        <QuestionnaireNext />
        <QuestionnaireSubmit />
      </QuestionnaireActions>
    </Questionnaire>
  )
}