'use client';

// A deliberately unambiguous 24-hour time picker. Native <input type="time">
// displays 12-hour AM/PM or 24-hour format depending on the *browser's own
// locale settings* — completely outside this app's control — which makes
// "12:00 PM" (noon) easy to misread as "end of day" on a 12-hour-locale
// browser. Two plain <select> dropdowns sidestep that entirely: every
// visitor sees the same unambiguous HH:MM regardless of their locale.

const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
const MINUTES = ['00', '05', '10', '15', '20', '25', '30', '35', '40', '45', '50', '55'];

export default function TimeInput24({
  value,
  onChange,
}: {
  value: string; // "HH:MM", 24-hour
  onChange: (value: string) => void;
}) {
  const [hh, mm] = value.split(':');

  return (
    <div className="flex items-center gap-1 bg-base border border-base-border rounded px-1.5 py-1">
      <select
        value={hh}
        onChange={(e) => onChange(`${e.target.value}:${mm}`)}
        className="bg-transparent text-ink text-sm font-mono focus:outline-none"
        aria-label="Hour (24-hour)"
      >
        {HOURS.map((h) => (
          <option key={h} value={h} className="bg-base">
            {h}
          </option>
        ))}
      </select>
      <span className="text-ink-faint">:</span>
      <select
        value={mm}
        onChange={(e) => onChange(`${hh}:${e.target.value}`)}
        className="bg-transparent text-ink text-sm font-mono focus:outline-none"
        aria-label="Minute"
      >
        {MINUTES.map((m) => (
          <option key={m} value={m} className="bg-base">
            {m}
          </option>
        ))}
      </select>
    </div>
  );
}