import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { INPUT_CLASS, LABEL_CLASS, PANEL_CLASS, PRIMARY_BUTTON_CLASS } from "./shared.js";

type VacationSettingsPanelProps = {
  vacationDefaultDays: number;
  vacationSaved: boolean;
  isSaving: boolean;
  onVacationDefaultDaysChange: (value: number) => void;
  onSave: () => void;
};

export function VacationSettingsPanel({
  vacationDefaultDays,
  vacationSaved,
  isSaving,
  onVacationDefaultDaysChange,
  onSave,
}: VacationSettingsPanelProps) {
  return (
    <div className={PANEL_CLASS}>
      <div>
        <h2 className="flex items-center text-base font-semibold text-gray-900 dark:text-gray-100">
          Vacation Defaults{" "}
          <InfoTooltip content="Sets the default vacation entitlement applied when creating new resources." />
        </h2>
        <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
          Default annual leave entitlement for new resources and the entitlement bulk-set tool.
        </p>
      </div>

      <div className="max-w-xs">
        <label className={LABEL_CLASS}>
          <span className="flex items-center">
            Default Annual Leave Days{" "}
            <InfoTooltip content="The number of vacation days granted per year." />
          </span>
        </label>
        <input
          type="number"
          className={INPUT_CLASS}
          value={vacationDefaultDays}
          onChange={(event) => onVacationDefaultDaysChange(parseInt(event.target.value, 10))}
          min={0}
          max={365}
        />
        <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
          Applied when creating new entitlement records for resources.
        </p>
      </div>

      <div className="flex items-center gap-3">
        <button
          type="button"
          onClick={onSave}
          disabled={isSaving}
          className={PRIMARY_BUTTON_CLASS}
        >
          {isSaving ? "Saving…" : "Save Vacation Settings"}
        </button>
        {vacationSaved ? (
          <span className="text-sm font-medium text-green-600 dark:text-green-400">Saved!</span>
        ) : null}
      </div>
    </div>
  );
}
