import React from 'react';
import case1 from '../../../assets/mwfrs_case_1.png';
import case2 from '../../../assets/mwfrs_case_2.png';
import case3 from '../../../assets/mwfrs_case_3.png';
import case4 from '../../../assets/mwfrs_case_4.png';

export const WindDesignCasesDiagram: React.FC = () => {

    // Helper for a single Case Box
    const CaseBox = ({ title, img, formulas = [] }: { title: string, img: string, formulas?: string[] }) => (
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
            <div style={{ padding: '10px', background: '#fff' }}>
                <img src={img} alt={title} style={{ maxWidth: '300px', height: 'auto', border: '1px solid #eee' }} />
            </div>
            {/* <div style={{ fontWeight: 'bold', fontSize: '0.9em', marginTop: '5px' }}>{title}</div> */}
            {formulas.map((f, i) => <div key={i} style={{ fontSize: '0.7em', color: '#555' }}>{f}</div>)}
        </div>
    );

    return (
        <div style={{ marginTop: '20px', overflowX: 'auto' }}>
            <div className="report-section-title">Design Load Cases</div>
            <div style={{ padding: '10px', background: '#f0f8ff', fontSize: '0.85em', fontStyle: 'italic', marginBottom: '10px' }}>
                NOTE: ASCE 7 requires the application of full and partial loading per the 4 cases below.
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'min-content min-content', gap: '30px', justifyContent: 'center' }}>
                <CaseBox title="CASE 1" img={case1} formulas={["Full Design Wind Pressure", "Acting independently in x and y"]} />
                <CaseBox title="CASE 2" img={case2} formulas={["Full Design Wind Pressure", "With eccentricity +/- 0.15 B"]} />
                <CaseBox title="CASE 3" img={case3} formulas={["75% Wind Pressure", "Acting simultaneously in x and y"]} />
                <CaseBox title="CASE 4" img={case4} formulas={["75% Wind Pressure", "With eccentricity +/- 0.15 B", "Acting simultaneously"]} />
            </div>
        </div>
    );
};