import { usePileCapStore } from '../../store/pileCapStore';

export const MaterialsInput = () => {
    const materials = usePileCapStore(state => state.materials);
    const setMaterials = usePileCapStore(state => state.setMaterials);

    return (
        <div className="card">
            <div className="card-header">Material Properties</div>

            <div className="input-group">
                <label className="input-label">Concrete Strength (f'c):</label>
                <div className="input-with-unit">
                    <input
                        type="number"
                        className="input-field"
                        value={materials.fc}
                        onChange={e => setMaterials({ fc: parseFloat(e.target.value) || 0 })}
                    />
                    <span className="input-unit">psi</span>
                </div>
            </div>

            <div className="input-group">
                <label className="input-label">Rebar Yield Strength (fy):</label>
                <div className="input-with-unit">
                    <input
                        type="number"
                        className="input-field"
                        value={materials.fy}
                        onChange={e => setMaterials({ fy: parseFloat(e.target.value) || 0 })}
                    />
                    <span className="input-unit">psi</span>
                </div>
            </div>

            <div className="card-header" style={{ marginTop: '16px' }}>Reduction Factors (φ)</div>

            <div className="input-group">
                <label className="input-label">Flexure (φ):</label>
                <input
                    type="number"
                    className="input-field"
                    value={materials.phiFlexure}
                    onChange={e => setMaterials({ phiFlexure: parseFloat(e.target.value) || 0 })}
                    step="0.05"
                />
            </div>

            <div className="input-group">
                <label className="input-label">Shear (φ):</label>
                <input
                    type="number"
                    className="input-field"
                    value={materials.phiShear}
                    onChange={e => setMaterials({ phiShear: parseFloat(e.target.value) || 0 })}
                    step="0.05"
                />
            </div>

            <div className="input-group">
                <label className="input-label">Bearing (φ):</label>
                <input
                    type="number"
                    className="input-field"
                    value={materials.phiBearing}
                    onChange={e => setMaterials({ phiBearing: parseFloat(e.target.value) || 0 })}
                    step="0.05"
                />
            </div>
        </div>
    );
};