// Trend-window preset selector shared by the live usage charts — the same
// fixed ladder acs-bumper's trends section uses. Picking a window refetches
// the chart at the preset's step; the options come from the engine's
// vocabulary so the UI can never offer a window the API rejects.

import { TREND_WINDOWS, type TrendWindowKey } from "@/engine/trend-window";
import { inputClassName } from "@/components/ui/input";

export function TrendWindowSelect(props: {
  value: TrendWindowKey;
  onChange: (window: TrendWindowKey) => void;
}) {
  return (
    <select
      aria-label="trend time range"
      value={props.value}
      onChange={(e) => props.onChange(e.target.value as TrendWindowKey)}
      className={`${inputClassName} h-7 w-auto py-0 text-xs`}
    >
      {TREND_WINDOWS.map((w) => (
        <option key={w.key} value={w.key}>
          {w.key}
        </option>
      ))}
    </select>
  );
}

/** The selector right-aligned on its own row. Stays mounted across every
 *  chart state so a slow or failed load can be retried at a different
 *  window. */
export function TrendWindowBar(props: {
  value: TrendWindowKey;
  onChange: (window: TrendWindowKey) => void;
}) {
  return (
    <div className="mb-1 flex items-center justify-end">
      <TrendWindowSelect value={props.value} onChange={props.onChange} />
    </div>
  );
}