Rate this

"use client";
import { useState, type SyntheticEvent } from "react";
import { LuCalendar, LuSend, LuUser } from "react-icons/lu";
import { Alert, Button, Rating, RatingInput, Textarea } from "@nexera-ui/react";

const WORDS = ["Not rated", "Poor", "Fair", "Good", "Very good", "Excellent"];

/** Rate this: star rating and an optional comment for a training session, with the session's average so far. */
export default function RateThis() {
  const [stars, setStars] = useState(0);
  const [sent, setSent] = useState(false);

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

  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <section
        aria-labelledby="rate-title"
        className="mx-auto grid max-w-lg gap-5 rounded-xl border border-default bg-surface p-5 shadow-sm @3xl:p-8"
      >
        <header className="grid gap-2">
          <p className="text-body-small text-secondary">Training · Onboarding week</p>
          <h2 id="rate-title" className="text-heading-h3 text-primary">
            Benefits and pension walkthrough
          </h2>
          <ul className="flex flex-wrap gap-x-4 gap-y-1 text-body-small text-secondary">
            <li className="flex items-center gap-1.5">
              <LuUser aria-hidden className="text-muted" /> Sara Malik, People Ops
            </li>
            <li className="flex items-center gap-1.5">
              <LuCalendar aria-hidden className="text-muted" /> Tue 6 Oct, 45 minutes
            </li>
          </ul>
          <Rating value={4.6} score="4.6" count="(38 ratings)" />
        </header>
        {sent ? (
          <Alert
            tone="success"
            title="Thanks for rating this session"
            description="Sara reads every comment before the next cohort."
            politeness="polite"
          />
        ) : (
          <form className="grid gap-5" onSubmit={onSubmit}>
            <RatingInput
              label="How useful was this session?"
              name="rating"
              value={stars}
              onChange={setStars}
              descriptor={(value) => WORDS[value]}
              isRequired
              errorMessage="Choose from 1 to 5 stars."
            />
            <Textarea
              label="What should we keep or change?"
              name="comment"
              maxLength={500}
              description="Optional. Shared with the trainer without your name."
            />
            <Button
              type="submit"
              size="md"
              trailingIcon={<LuSend />}
              className="justify-self-start"
            >
              Send rating
            </Button>
          </form>
        )}
      </section>
    </div>
  );
}