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

export const LateralBracingInput: React.FC = () => {
    const { lateralBracing, setLateralBracing } = useBeamStore();

    return (
        <div className="card">
            <div className="card-header">Lateral Bracing</div>

            <div style={{ marginBottom: '12px' }}>
                <div style={{ fontWeight: 600, marginBottom: '8px', fontSize: '13px' }}>Cb-factor</div>
                <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
                    <input
                        type="radio"
                        name="cbFactor"
                        checked={lateralBracing.cbFactor === 'Calculated'}
                        onChange={() => setLateralBracing({ cbFactor: 'Calculated', cbValue: undefined })}
                    />
                    Calculated
                </label>
                <label style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                    <input
                        type="radio"
                        name="cbFactor"
                        checked={lateralBracing.cbFactor === 'User-defined'}
                        onChange={() => setLateralBracing({ cbFactor: 'User-defined', cbValue: 1.0 })}
                    />
                    User-defined
                    {lateralBracing.cbFactor === 'User-defined' && (
                        <input
                            type="number"
                            style={{ width: '80px', marginLeft: '8px' }}
                            value={lateralBracing.cbValue || 1.0}
                            onChange={(e) => setLateralBracing({ cbValue: parseFloat(e.target.value) || 1.0 })}
                            step="0.1"
                            min="1.0"
                            max="3.0"
                        />
                    )}
                </label>
            </div>
        </div>
    );
};