Order tracking

import { LuCircleCheck, LuCircleDot, LuCircle, LuLaptop, LuMapPin } from "react-icons/lu";
import { Badge, Button, ProgressSteps } from "@nexera-ui/react";

const STEPS = [
  {
    title: "Ordered",
    when: "Mon 5 Oct, 09:12",
    note: "Requested by Ahmed Raza for Luis Ortega’s first day.",
  },
  {
    title: "Approved",
    when: "Mon 5 Oct, 11:40",
    note: "Approved by Finance (budget code ENG-HW-26).",
  },
  {
    title: "Packed",
    when: "Tue 6 Oct, 16:05",
    note: "Configured with Northwind security profile and packed at the IT depot.",
  },
  {
    title: "Out for delivery",
    when: "Wed 7 Oct, 08:30",
    note: "With the courier. Signature required on arrival.",
  },
  {
    title: "Delivered",
    when: "Expected Wed 7 Oct, by 13:00",
    note: "Northwind Madrid, reception desk.",
  },
] as const;

const CURRENT = 4;

/** Order tracking: where an equipment order is, step by step. */
export default function OrderTracking() {
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <article
        aria-labelledby="tracking-title"
        className="mx-auto grid w-full max-w-2xl gap-6 rounded-xl border border-default bg-surface p-5 shadow-xs @3xl:p-6"
      >
        <header className="flex flex-wrap items-start justify-between gap-3">
          <div className="flex min-w-0 items-start gap-3">
            <span
              aria-hidden="true"
              className="grid size-10 shrink-0 place-items-center rounded-lg bg-brand-subtle text-brand-text"
            >
              <LuLaptop className="size-5" />
            </span>
            <div className="grid gap-1">
              <h2 id="tracking-title" className="text-heading-h3 text-primary">
                New-starter laptop
              </h2>
              <p className="text-body-small text-secondary">
                Order HW-2291 · 14-inch laptop, dock and headset
              </p>
            </div>
          </div>
          <Badge tone="info" label="In transit" size="md" />
        </header>

        <ProgressSteps
          steps={STEPS.length}
          current={CURRENT}
          title={STEPS[CURRENT - 1]?.title ?? ""}
        />

        <section aria-labelledby="history-title" className="grid gap-3">
          <h3 id="history-title" className="text-heading-h4 text-primary">
            History
          </h3>
          <ol className="m-0 grid list-none gap-0 p-0">
            {STEPS.map((step, i) => {
              const done = i + 1 < CURRENT;
              const current = i + 1 === CURRENT;
              const Icon = done ? LuCircleCheck : current ? LuCircleDot : LuCircle;
              return (
                <li
                  key={step.title}
                  aria-current={current ? "step" : undefined}
                  className="grid grid-cols-[1.5rem_1fr] gap-x-3"
                >
                  <span className="flex flex-col items-center">
                    <Icon
                      aria-hidden="true"
                      className={`size-5 shrink-0 ${done ? "text-status-success-fg" : current ? "text-brand-text" : "text-muted"}`}
                    />
                    {i < STEPS.length - 1 ? (
                      <span aria-hidden="true" className="w-px flex-1 bg-border-default" />
                    ) : null}
                  </span>
                  <div className="grid gap-0.5 pb-5">
                    <div className="flex flex-wrap items-center gap-2">
                      <span
                        className={
                          current || done
                            ? "text-body-strong text-primary"
                            : "text-body-strong text-muted"
                        }
                      >
                        {step.title}
                      </span>
                      <span className="sr-only">
                        {done ? "(done)" : current ? "(current)" : "(upcoming)"}
                      </span>
                    </div>
                    <span className="text-body-caption text-muted">{step.when}</span>
                    <span className="text-body-small text-secondary">{step.note}</span>
                  </div>
                </li>
              );
            })}
          </ol>
        </section>

        <footer className="flex flex-wrap items-center justify-between gap-3 rounded-lg bg-sunken p-4">
          <p className="flex items-center gap-2 text-body-small text-secondary">
            <LuMapPin aria-hidden="true" className="size-4 shrink-0" />
            Calle de Alcalá 48, 28014 Madrid
          </p>
          <Button variant="secondary">Change delivery</Button>
        </footer>
      </article>
    </div>
  );
}