import type { EffortDisplayMode } from "../../planner/allocationTimeline";

interface EffortDisplaySelectProps {
  value: EffortDisplayMode;
  onChange: (value: EffortDisplayMode) => void;
}

const OPTIONS: Array<{ value: EffortDisplayMode; label: string }> = [
  { value: "days", label: "Days" },
  { value: "hours", label: "Hours" },
];

export function EffortDisplaySelect({ value, onChange }: EffortDisplaySelectProps) {
  return (
    <select
      aria-label="Display effort as hours or days"
      className="effort-display-select"
      onChange={(event) => onChange(event.target.value as EffortDisplayMode)}
      value={value}
    >
      {OPTIONS.map((option) => (
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      ))}
    </select>
  );
}