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

export const DesignInput = () => {
    const { design, setDesign } = usePileCapStore();

    const handleChange = (field: keyof typeof design, value: string | number) => {
        setDesign({ [field]: value });
    };

    return (
        <div className="input-group">
            <h3 className="section-title">Design Parameters</h3>

            <div className="input-row">
                <div className="input-field">
                    <label>Design Method</label>
                    <select
                        value={design.designMethod}
                        onChange={(e) => handleChange('designMethod', e.target.value)}
                    >
                        <option value="LRFD">LRFD (Load & Resistance Factor Design)</option>
                        <option value="ASD">ASD (Allowable Stress Design)</option>
                    </select>
                </div>

                <div className="input-field">
                    <label>Design Code</label>
                    <select
                        value={design.codeYear}
                        onChange={(e) => handleChange('codeYear', e.target.value)}
                    >
                        <option value="ACI 318-19">ACI 318-19</option>
                        <option value="ACI 318-14">ACI 318-14</option>
                        <option value="ACI 318-11">ACI 318-11</option>
                    </select>
                </div>
            </div>

            <div className="input-row">
                <div className="input-field">
                    <label>Load Combination</label>
                    <select
                        value={design.loadCombination}
                        onChange={(e) => handleChange('loadCombination', e.target.value)}
                    >
                        <option value="1.2D + 1.6L">1.2D + 1.6L</option>
                        <option value="1.4D">1.4D</option>
                        <option value="1.2D + 1.0E + 1.0L">1.2D + 1.0E + 1.0L</option>
                        <option value="0.9D + 1.0E">0.9D + 1.0E</option>
                        <option value="1.2D + 1.0W + 1.0L">1.2D + 1.0W + 1.0L</option>
                        <option value="0.9D + 1.0W">0.9D + 1.0W</option>
                    </select>
                    <div className="help-text">Governing combination is automatically determined. This selection highlights the specific case.</div>
                </div>
            </div>
        </div>
    );
};