Choose an option

"use client";
import { useState } from "react";
import { LuClock, LuRepeat } from "react-icons/lu";
import { Button, Dialog, RadioField, RadioGroup } from "@nexera-ui/react";

const SHIFTS = [
  { id: "early", label: "Early", hours: "06:00 to 14:00", note: "2 of 4 places left" },
  { id: "day", label: "Day", hours: "09:00 to 17:00", note: "1 of 6 places left" },
  { id: "late", label: "Late", hours: "14:00 to 22:00", note: "3 of 4 places left" },
  { id: "night", label: "Night", hours: "22:00 to 06:00", note: "Full", isDisabled: true },
];

/** Choose an option: a dialog with a short list of shifts, opened from a shift card. */
export default function ChooseAnOption() {
  const [shift, setShift] = useState("day");
  const [draft, setDraft] = useState(shift);
  const [open, setOpen] = useState(false);
  const current = SHIFTS.find((s) => s.id === shift) ?? SHIFTS[0];
  if (!current) return null;

  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <section
        aria-labelledby="shift-title"
        className="mx-auto grid max-w-md gap-5 rounded-xl border border-default bg-surface p-5 shadow-sm @3xl:p-6"
      >
        <header className="grid gap-1">
          <p className="text-body-small text-secondary">Warehouse team · Wednesday 14 October</p>
          <h2 id="shift-title" className="text-heading-h3 text-primary">
            Your shift
          </h2>
        </header>
        <div className="flex items-center gap-3 rounded-lg bg-sunken p-4">
          <span className="grid size-10 shrink-0 place-items-center rounded-md bg-brand-subtle text-brand-text">
            <LuClock aria-hidden />
          </span>
          <div className="grid gap-0.5">
            <p className="text-body-strong text-primary">{current.label} shift</p>
            <p className="text-body-small text-secondary">{current.hours}</p>
          </div>
        </div>
        <Button
          variant="secondary"
          size="md"
          leadingIcon={<LuRepeat />}
          className="w-full"
          onPress={() => {
            setDraft(shift);
            setOpen(true);
          }}
        >
          Change shift
        </Button>
      </section>

      <Dialog
        title="Choose a shift"
        body="Your manager, Ahmed Raza, is told about the change. Swaps close 24 hours before the shift starts."
        isOpen={open}
        onOpenChange={setOpen}
        primaryLabel="Save shift"
        onPrimaryAction={() => {
          setShift(draft);
        }}
        secondaryLabel="Cancel"
      >
        <RadioGroup label="Shift on Wednesday 14 October" value={draft} onChange={setDraft}>
          {SHIFTS.map((s) => (
            <RadioField
              key={s.id}
              value={s.id}
              label={`${s.label}, ${s.hours}`}
              description={s.note}
              isDisabled={s.isDisabled === true}
            />
          ))}
        </RadioGroup>
      </Dialog>
    </div>
  );
}