import { TIMEZONES, timezoneLabel } from '../data/timezones';

/**
 * The one timezone dropdown. Every timezone field renders this same list;
 * a value from outside the list (legacy data) shows a disabled placeholder
 * until the user picks a real zone.
 */
export function TimezoneSelect({ value, onChange, className, ...props }) {
  const known = TIMEZONES.includes(value);
  return (
    <select
      className={className}
      value={known ? value : ''}
      onChange={(e) => onChange(e.target.value)}
      {...props}
    >
      {!known && (
        <option value="" disabled>
          Select a timezone…
        </option>
      )}
      {TIMEZONES.map((zone) => (
        <option key={zone} value={zone}>
          {timezoneLabel(zone)}
        </option>
      ))}
    </select>
  );
}
