NPS survey

"use client";
import { useState, type SyntheticEvent } from "react";
import { LuHeartHandshake, LuLock, LuSend } from "react-icons/lu";
import { Button, EmptyState, NPSScale, Textarea } from "@nexera-ui/react";

function followUp(score: number | null) {
  if (score === null) return "What is the main reason for your score?";
  if (score <= 6) return "What would make Northwind a better place to work?";
  if (score <= 8) return "What one thing would move your score up?";
  return "What do you value most about working here?";
}

/** NPS survey: how likely an employee is to recommend Northwind as an employer, from 0 to 10, with a follow-up question. */
export default function NpsSurvey() {
  const [score, setScore] = useState<number | null>(null);
  const [sent, setSent] = useState(false);

  const onSubmit = (event: SyntheticEvent<HTMLFormElement>) => {
    event.preventDefault();
    setSent(true); // replace with your survey response request
  };

  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <section
        aria-labelledby="enps-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">
            Quarterly pulse · Q4 2026 · closes 21 October
          </p>
          <h2 id="enps-title" className="text-heading-h3 text-primary">
            Would you recommend Northwind?
          </h2>
        </header>
        {sent ? (
          <EmptyState
            size="md"
            headingLevel={3}
            icon={<LuHeartHandshake />}
            title="Thanks for your answer"
            description="Results are shared at the November all-hands. Teams with fewer than five answers are never shown."
            primaryAction={
              <Button
                size="sm"
                variant="secondary"
                onPress={() => {
                  setSent(false);
                  setScore(null);
                }}
              >
                Change my answer
              </Button>
            }
          />
        ) : (
          <form className="grid gap-6" onSubmit={onSubmit}>
            <NPSScale
              label="How likely are you to recommend Northwind as a place to work to a friend?"
              name="score"
              value={score}
              onChange={setScore}
              lowAnchor="Not at all likely"
              highAnchor="Extremely likely"
              isRequired
              errorMessage="Choose a score from 0 to 10."
            />
            <Textarea
              label={followUp(score)}
              name="reason"
              maxLength={500}
              description="Optional. Do not include names."
            />
            <div className="flex flex-wrap items-center justify-between gap-3">
              <p className="flex items-center gap-2 text-body-small text-secondary">
                <LuLock aria-hidden className="shrink-0" />
                Anonymous: your manager never sees individual answers.
              </p>
              <Button type="submit" size="md" trailingIcon={<LuSend />}>
                Send answer
              </Button>
            </div>
          </form>
        )}
      </section>
    </div>
  );
}