"use client";

import { Timer } from "lucide-react";
import { usePathname, useRouter } from "next/navigation";
import { REFRESH_OPTIONS_MS } from "./refresh-rate";

/** Keeps the refresh rate in the URL so the server-rendered grid can read it. */
export default function RefreshRateSelect({ value }: { value: number }) {
  const router = useRouter();
  const pathname = usePathname();

  return (
    <label className="flex items-center gap-2 text-sm">
      <Timer aria-hidden className="size-4" />
      Snapshot refresh
      <select
        value={value}
        onChange={(e) => router.replace(`${pathname}?refresh=${e.target.value}`, { scroll: false })}
        className="rounded border border-zinc-300 bg-transparent px-2 py-1 dark:border-zinc-700"
      >
        {REFRESH_OPTIONS_MS.map((ms) => (
          <option key={ms} value={ms}>
            {ms / 1000} s
          </option>
        ))}
      </select>
    </label>
  );
}