import React from 'react';
import { JobInfo } from '../JobInfo';
import { CodeSelection } from '../CodeSelection';
import { BuildingGeometry } from '../BuildingGeometry';
import { FireRating } from '../FireRating';
import { LiveLoadsSection } from '../LiveLoadsSection';

export const CodeSheet: React.FC = () => {
    return (
        <div className="sheet-content">
            <h2>Code Search</h2>
            <div className="calculator-grid">
                <div className="flex-col gap-md">
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2rem' }}>
                        <div className="flex-col gap-md">
                            <CodeSelection />
                            <FireRating />
                        </div>
                        <div className="flex-col gap-md">
                            <JobInfo />
                            {/* Placeholder for User Code / Notes box from screenshot if needed */}
                        </div>
                    </div>

                    <BuildingGeometry />

                    <LiveLoadsSection />
                </div>
            </div>
        </div>
    );
};