import React from 'react';
import { useCalculatorStore } from '../../store/calculatorStore';

export const FireRating: React.FC = () => {
    const { general, setGeneral } = useCalculatorStore();

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const val = parseFloat(e.target.value);
        setGeneral({
            fireRating: {
                ...general.fireRating,
                [e.target.name]: val
            }
        });
    };

    return (
        <div className="card">
            <div className="card-header">Type of Construction</div>
            <div className="flex-col gap-sm">
                <div className="input-label" style={{ fontWeight: 'bold' }}>Fire Rating:</div>
                <div className="input-group">
                    <label className="input-label" style={{ textAlign: 'right', paddingRight: '10px' }}>Roof =</label>
                    <input type="number" name="roof" className="input-field-sm" value={general.fireRating.roof} onChange={handleChange} />
                    <span className="input-unit">hr</span>
                </div>
                <div className="input-group">
                    <label className="input-label" style={{ textAlign: 'right', paddingRight: '10px' }}>Floor =</label>
                    <input type="number" name="floor" className="input-field-sm" value={general.fireRating.floor} onChange={handleChange} />
                    <span className="input-unit">hr</span>
                </div>
            </div>
        </div>
    );
};