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

export const BoltsInput = () => {
    const { bolts, setBolts } = useConnectionStore();

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

            <div className="input-group">
                <span className="input-label">Number of Rows</span>
                <input
                    type="number"
                    min="1"
                    value={bolts.numberOfRows}
                    onChange={(e) => setBolts({ numberOfRows: Number(e.target.value) })}
                    className="input-field"
                />
            </div>

            <div className="input-group">
                <span className="input-label">Bolt Diameter</span>
                <select
                    value={bolts.diameter}
                    onChange={(e) => setBolts({ diameter: Number(e.target.value) })}
                    className="input-field-wide"
                >
                    <option value={0.625}>5/8"</option>
                    <option value={0.75}>3/4"</option>
                    <option value={0.875}>7/8"</option>
                    <option value={1.0}>1"</option>
                </select>
            </div>

            <div className="input-group">
                <span className="input-label">Bolt Grade</span>
                <select
                    value={bolts.grade}
                    onChange={(e) => setBolts({ grade: e.target.value as 'A325' | 'A490' })}
                    className="input-field-wide"
                >
                    <option value="A325">A325</option>
                    <option value="A490">A490</option>
                </select>
            </div>

            <div className="input-group">
                <span className="input-label">Bolt Spacing</span>
                <input
                    type="number"
                    step="0.125"
                    value={bolts.spacing}
                    onChange={(e) => setBolts({ spacing: Number(e.target.value) })}
                    className="input-field"
                />
                <span className="input-unit">in</span>
            </div>

            <label style={{ display: 'flex', alignItems: 'center', gap: '8px', marginTop: '12px' }}>
                <input
                    type="checkbox"
                    checked={bolts.threadsIncluded}
                    onChange={(e) => setBolts({ threadsIncluded: e.target.checked })}
                />
                <span style={{ fontSize: '12px', color: 'var(--text-secondary)' }}>
                    Threads included in shear plane
                </span>
            </label>
        </div>
    );
};