Questionnaire

import {
  Questionnaire,
  QuestionnaireActions,
  QuestionnaireCheckpoints,
  QuestionnaireChoice,
  QuestionnaireChoices,
  QuestionnaireDescription,
  QuestionnaireError,
  QuestionnaireInput,
  QuestionnaireItem,
  QuestionnaireNext,
  QuestionnairePrevious,
  QuestionnaireSkip,
  QuestionnaireSubmit,
  QuestionnaireTitle,
  QuestionnaireViewport,
} from "@/components/unlumen-ui/questionnaire";

const items = [
  {
    name: "direction",
    required: true,
    choices: [
      { value: "delegation" },
      { value: "questions" },
      { value: "both" },
    ],
  },
  {
    name: "detail",
    required: false,
    choices: [{ value: "focused" }, { value: "complete" }],
  },
] as const;

export default function Example() {
  return (
    <Questionnaire
      items={items}
      shortcuts="letters"
      onSubmit={(event) => {
        event.preventDefault();
        const answers = new FormData(event.currentTarget);
        console.log(answers.get("direction"));
      }}
    >
      <QuestionnaireCheckpoints />

      <QuestionnaireViewport>
        <QuestionnaireItem name="direction" required>
          <QuestionnaireTitle>
            What should we prototype next?
          </QuestionnaireTitle>
          <QuestionnaireDescription>
            Choose a direction or write your own.
          </QuestionnaireDescription>
          <QuestionnaireChoices>
            <QuestionnaireChoice value="delegation">
              Delegation
            </QuestionnaireChoice>
            <QuestionnaireChoice value="questions">
              Question prompts
            </QuestionnaireChoice>
            <QuestionnaireChoice value="both">
              Both together
            </QuestionnaireChoice>
            <QuestionnaireInput placeholder="Another answer…" />
          </QuestionnaireChoices>
          <QuestionnaireError />
        </QuestionnaireItem>

        <QuestionnaireItem name="detail">
          <QuestionnaireTitle>
            How much detail should it include?
          </QuestionnaireTitle>
          <QuestionnaireDescription>
            Skip this question if you are not sure yet.
          </QuestionnaireDescription>
          <QuestionnaireChoices>
            <QuestionnaireChoice value="focused">Focused</QuestionnaireChoice>
            <QuestionnaireChoice value="complete">
              Complete flow
            </QuestionnaireChoice>
          </QuestionnaireChoices>
          <QuestionnaireError />
        </QuestionnaireItem>
      </QuestionnaireViewport>

      <QuestionnaireActions>
        <QuestionnairePrevious />
        <QuestionnaireSkip />
        <QuestionnaireNext />
        <QuestionnaireSubmit />
      </QuestionnaireActions>
    </Questionnaire>
  );
}