import React from 'react';
import { useDesignStore } from '../../store/useDesignStore';

export const LoadsInput: React.FC = () => {
    const { loads, setLoads } = useDesignStore();

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value } = e.target;
        setLoads({ [name]: parseFloat(value) || 0 });
    };

    return (
        <div className="card">
            <h3 className="mb-sm">Factored Loads (LRFD)</h3>
            <div className="flex-col gap-sm">
                <div className="flex-row gap-md align-center">
                    <label style={{ width: '120px' }}>Axial Force P</label>
                    <input
                        type="number" name="P" value={loads.P} onChange={handleChange}
                        className="input-field" step="0.1"
                    />
                    <span>kip</span>
                </div>

                <div className="flex-row gap-md">
                    <div className="flex-row gap-sm align-center">
                        <label style={{ width: '120px' }}>Moment Mx</label>
                        <input type="number" name="Mx" value={loads.Mx} onChange={handleChange} className="input-field" />
                        <span>k-ft</span>
                    </div>
                    <div className="flex-row gap-sm align-center">
                        <label>Mz</label>
                        <input type="number" name="Mz" value={loads.Mz} onChange={handleChange} className="input-field" />
                        <span>k-ft</span>
                    </div>
                </div>

                <div className="flex-row gap-md">
                    <div className="flex-row gap-sm align-center">
                        <label style={{ width: '120px' }}>Shear Vx</label>
                        <input type="number" name="Vx" value={loads.Vx} onChange={handleChange} className="input-field" />
                        <span>kip</span>
                    </div>
                    <div className="flex-row gap-sm align-center">
                        <label>Vz</label>
                        <input type="number" name="Vz" value={loads.Vz} onChange={handleChange} className="input-field" />
                        <span>kip</span>
                    </div>
                </div>
            </div>

            <style>{`
        .input-field {
          width: 80px;
          padding: 4px;
          border: 1px solid #ccc;
          border-radius: 4px;
          text-align: right;
        }
        .mb-sm { margin-bottom: 8px; }
        .align-center { align-items: center; }
      `}</style>
        </div>
    );
};