Short survey

"use client";
import { useState, type SyntheticEvent } from "react";
import { LuArrowLeft, LuArrowRight, LuSend } from "react-icons/lu";
import {
  Alert,
  Button,
  CheckboxField,
  CheckboxGroup,
  RadioField,
  RadioGroup,
  Stepper,
  Textarea,
} from "@nexera-ui/react";

const STEPS = ["Workload", "Tools", "Anything else"];

const WORKLOAD = [
  { id: "light", label: "Too light", description: "I have room for more." },
  { id: "right", label: "About right" },
  { id: "heavy", label: "Too heavy", description: "I often work late to keep up." },
];

const TOOLS = ["Slack", "Linear", "Google Workspace", "Northwind HR", "Figma", "Notion"];

/** Short survey: three quick questions about hybrid work, one step at a time. */
export default function ShortSurvey() {
  const [step, setStep] = useState(1);
  const [workload, setWorkload] = useState("");
  const [tools, setTools] = useState<string[]>([]);
  const [note, setNote] = useState("");
  const [done, setDone] = useState(false);

  const onSubmit = (event: SyntheticEvent<HTMLFormElement>) => {
    event.preventDefault(); // only reached once the visible question is valid
    if (step < STEPS.length) setStep(step + 1);
    else setDone(true); // replace with your survey response request
  };

  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <section
        aria-labelledby="survey-title"
        className="mx-auto grid max-w-2xl gap-6 rounded-xl border border-default bg-surface p-5 shadow-sm @3xl:p-8"
      >
        <header className="grid gap-1">
          <p className="text-body-small text-secondary">Hybrid work survey · about 2 minutes</p>
          <h2 id="survey-title" className="text-heading-h3 text-primary">
            How is hybrid work going?
          </h2>
        </header>
        <Stepper
          aria-label="Survey progress"
          current={done ? STEPS.length + 1 : step}
          steps={STEPS.map((label, i) => ({
            label,
            ...(i + 1 < step && !done
              ? {
                  onPress: () => {
                    setStep(i + 1);
                  },
                }
              : {}),
          }))}
        />
        {done ? (
          <Alert
            tone="success"
            title="Thanks, your answers are in"
            description="We share the results with every team on 30 October."
            politeness="polite"
          />
        ) : (
          <form className="grid gap-6" onSubmit={onSubmit}>
            {step === 1 ? (
              <RadioGroup
                label="How is your workload this month?"
                name="workload"
                value={workload}
                onChange={setWorkload}
                isRequired
                errorMessage="Choose one answer."
              >
                {WORKLOAD.map((option) => (
                  <RadioField
                    key={option.id}
                    value={option.id}
                    label={option.label}
                    {...(option.description ? { description: option.description } : {})}
                  />
                ))}
              </RadioGroup>
            ) : null}
            {step === 2 ? (
              <CheckboxGroup
                label="Which tools help you most when working remotely?"
                description="Choose all that apply."
                name="tools"
                value={tools}
                onChange={setTools}
              >
                <div className="grid gap-3 @3xl:grid-cols-2">
                  {TOOLS.map((tool) => (
                    <CheckboxField key={tool} value={tool} label={tool} />
                  ))}
                </div>
              </CheckboxGroup>
            ) : null}
            {step === 3 ? (
              <Textarea
                label="Anything else you want leadership to hear?"
                name="note"
                value={note}
                onChange={setNote}
                maxLength={600}
                description="Optional and anonymous."
              />
            ) : null}
            <div className="flex flex-wrap justify-between gap-3">
              <Button
                variant="secondary"
                size="md"
                leadingIcon={<LuArrowLeft />}
                isDisabled={step === 1}
                onPress={() => {
                  setStep(step - 1);
                }}
              >
                Back
              </Button>
              <Button
                type="submit"
                size="md"
                trailingIcon={step === STEPS.length ? <LuSend /> : <LuArrowRight />}
              >
                {step === STEPS.length ? "Send answers" : "Next"}
              </Button>
            </div>
          </form>
        )}
      </section>
    </div>
  );
}