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

export const MaterialsInput: React.FC = () => {
    const { materials, setMaterials } = useDesignStore();

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const { name, value, type, checked } = e.target;
        setMaterials({
            [name]: type === 'checkbox' ? checked : parseFloat(value) || 0
        });
    };

    return (
        <div className="card">
            <h3 className="mb-sm">Materials & Analysis</h3>

            <div className="flex-col gap-sm">
                <div className="flex-row gap-md align-center">
                    <label style={{ width: '160px' }}>Concrete f'c</label>
                    <input type="number" name="fc" value={materials.fc} onChange={handleChange} className="input-field" />
                    <span>ksi</span>
                </div>
                <div className="flex-row gap-md align-center">
                    <label style={{ width: '160px' }}>Rebar fy</label>
                    <input type="number" name="fy_rebar" value={materials.fy_rebar} onChange={handleChange} className="input-field" />
                    <span>ksi</span>
                </div>
                <div className="flex-row gap-md align-center">
                    <label style={{ width: '160px' }}>Plate Steel Fy</label>
                    <input type="number" name="fy_plate" value={materials.fy_plate} onChange={handleChange} className="input-field" />
                    <span>ksi</span>
                </div>

                <div className="flex-row gap-sm align-center mt-sm">
                    <input
                        type="checkbox"
                        name="seismic"
                        checked={materials.seismic}
                        onChange={handleChange}
                        id="seismic-check"
                    />
                    <label htmlFor="seismic-check">Apply Seismic Provisions</label>
                </div>
            </div>
            <style>{`
        .mt-sm { margin-top: 8px; }
      `}</style>
        </div>
    );
};