import { Component, Signal } from "solid-js";

export interface WindSignals {
    direction: Signal<string>;
    speed: Signal<string>;
    gusts: Signal<string>;
    roundValues: Signal<boolean>;
}

export const WindInputs: Component<{signals: WindSignals}> = (
    { signals: {
        direction: [getDirection, setDirection], 
        speed: [getSpeed, setSpeed],
        gusts: [getGusts, setGusts],
    }}
) => {
    return (
    <>
        <label class="windField">
            <span>Wind direction</span>
            <input
                type="text"
                value={getDirection()}
                placeholder="e.g. ZA"
                onInput={e => setDirection(e.target.value)}
            />
        </label>
        <label class="windField">
            <span>Wind speed</span>
            <input
                type="text"
                value={getSpeed()}
                placeholder="e.g. 2–6"
                onInput={e => setSpeed(e.target.value)}
            />
        </label>
        <label class="windField">
            <span>Gusts</span>
            <input
                type="text"
                value={getGusts()}
                placeholder="e.g. 5–10"
                onInput={e => setGusts(e.target.value)}
            />
        </label>
    </>
    );
}
