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

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

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

    return (
        <div className="card">
            <div className="card-header">Job Information</div>
            <div className="flex-col gap-sm">
                <div className="input-group">
                    <label className="input-label">Job Title:</label>
                    <input
                        type="text"
                        name="jobTitle"
                        className="input-field-wide"
                        value={general.jobTitle}
                        onChange={handleChange}
                    />
                </div>
                <div className="input-group">
                    <label className="input-label">Job No:</label>
                    <input
                        type="text"
                        name="jobNo"
                        className="input-field"
                        value={general.jobNo}
                        onChange={handleChange}
                    />
                </div>
                <div className="flex-row gap-lg">
                    <div className="input-group">
                        <label className="input-label" style={{ minWidth: 'auto' }}>Calculated By:</label>
                        <input
                            type="text"
                            name="calculatedBy"
                            className="input-field"
                            value={general.calculatedBy}
                            onChange={handleChange}
                        />
                    </div>
                    <div className="input-group">
                        <label className="input-label" style={{ minWidth: 'auto' }}>Date:</label>
                        <input
                            type="text"
                            name="date"
                            className="input-field"
                            value={general.date}
                            onChange={handleChange}
                        />
                    </div>
                </div>
            </div>
        </div>
    );
};