import { HEARTBEAT_INTERVAL_OPTIONS, isOneMinuteInterval } from '../../../utils/heartbeatInterval';

interface HeartbeatIntervalSelectProps {
    value: number;
    onChange: (seconds: number) => void;
    disabled?: boolean;
    showWarning?: boolean;
}

export function HeartbeatIntervalSelect({
    value,
    onChange,
    disabled = false,
    showWarning = true,
}: HeartbeatIntervalSelectProps) {
    return (
        <div className="space-y-3">
            <select
                value={value}
                onChange={(e) => onChange(parseInt(e.target.value, 10))}
                disabled={disabled}
                className="w-full sm:w-auto min-w-[200px] px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-sm text-slate-200 focus:outline-none focus:border-rose-500/40 disabled:opacity-50"
            >
                {HEARTBEAT_INTERVAL_OPTIONS.map((option) => (
                    <option key={option.value} value={option.value}>
                        {option.label}
                    </option>
                ))}
            </select>

            {showWarning && isOneMinuteInterval(value) && (
                <div className="p-3 rounded-xl bg-amber-500/10 border border-amber-500/20 text-amber-300 text-xs">
                    This interval may significantly increase server load when managing many websites.
                </div>
            )}
        </div>
    );
}