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

export const ConcretePropertiesInput: React.FC = () => {
    const { concrete, setConcreteProperties } = useBeamStore();

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

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

            <div className="input-group">
                <label className="input-label">Concrete Density</label>
                <input
                    type="number"
                    className="input-field"
                    value={concrete.density}
                    onChange={(e) => setConcreteProperties({ density: parseFloat(e.target.value) || 0 })}
                    step="1"
                />
                <span className="input-unit">pcf</span>
            </div>

            <div className="flex-row gap-md" style={{ marginBottom: '12px' }}>
                <div className="input-group" style={{ flex: 1, marginBottom: 0 }}>
                    <label className="input-label">Overall Slab Thickness</label>
                    <input
                        type="number"
                        className="input-field"
                        value={concrete.slabThickness}
                        onChange={(e) => setConcreteProperties({ slabThickness: parseFloat(e.target.value) || 0 })}
                        step="0.1"
                    />
                    <span className="input-unit">in</span>
                </div>

                <div className="input-group" style={{ flex: 1, marginBottom: 0 }}>
                    <label className="input-label">Beam Spacing</label>
                    <input
                        type="number"
                        className="input-field"
                        value={concrete.beamSpacing}
                        onChange={(e) => setConcreteProperties({ beamSpacing: parseFloat(e.target.value) || 0 })}
                        step="0.1"
                    />
                    <span className="input-unit">ft</span>
                </div>
            </div>

            <div className="input-group">
                <label className="input-label">Beam Position</label>
                <select
                    className="input-field-wide"
                    value={concrete.beamPosition}
                    onChange={(e) => setConcreteProperties({ beamPosition: e.target.value as 'Interior' | 'Edge' })}
                >
                    <option value="Interior">Interior</option>
                    <option value="Edge">Edge</option>
                </select>
            </div>
        </div>
    );
};