import { useConnectionStore } from '../../store/connectionStore';

export const WeldInput = () => {
    const { weld, setWeld } = useConnectionStore();

    return (
        <div className="card">
            <div className="card-header">Weld Configuration</div>

            <div className="input-group">
                <span className="input-label">Weld Type</span>
                <input
                    type="text"
                    value={weld.type}
                    onChange={(e) => setWeld({ type: e.target.value })}
                    className="input-field-wide"
                    placeholder="e.g., fillet"
                />
            </div>

            <div className="input-group">
                <span className="input-label">Weld Size</span>
                <input
                    type="number"
                    step="0.0625"
                    value={weld.size}
                    onChange={(e) => setWeld({ size: Number(e.target.value) })}
                    className="input-field"
                />
                <span className="input-unit">in</span>
            </div>

            <div className="input-group">
                <span className="input-label">Electrode Strength</span>
                <input
                    type="number"
                    value={weld.strength}
                    onChange={(e) => setWeld({ strength: Number(e.target.value) })}
                    className="input-field"
                />
                <span className="input-unit">ksi</span>
            </div>
        </div>
    );
};