import React from 'react';
import asce7_22 from '../../../assets/cnc_zones_asce7_22.png';
import asce7_16 from '../../../assets/cnc_zones_asce7_16.png';
import asce7_10 from '../../../assets/cnc_zones_asce7_10.png';

interface Props {
    a: number;
    h: number;
    leastWidth: number;
}

export const ComponentsCladdingZones: React.FC<Props> = ({ a, h, leastWidth }) => {
    // Derived values common in diagrams
    const two_a = a * 2;
    const four_a = a * 4;
    const point6_h = h * 0.6;

    return (
        <div className="card" style={{ padding: '20px', marginTop: '20px', background: '#fff' }}>
            <div className="report-section-title" style={{ marginBottom: '20px', textDecoration: 'underline' }}>
                Location of C&C Wind Pressure Zones
            </div>

            {/* Dynamic Project Values Legend */}
            <div style={{ padding: '15px', background: '#f5f5f5', borderRadius: '4px', marginBottom: '20px', borderLeft: '4px solid #cc0000' }}>
                <div style={{ fontWeight: 'bold', marginBottom: '10px', color: '#cc0000' }}>Project Dimensions Reference:</div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '20px', fontSize: '0.9em' }}>
                    <div><strong>h</strong> = {h.toFixed(2)} ft</div>
                    <div><strong>a</strong> = {a.toFixed(2)} ft</div>
                    <div><strong>2a</strong> = {two_a.toFixed(2)} ft</div>
                    <div><strong>4a</strong> = {four_a.toFixed(2)} ft</div>
                    <div><strong>0.6h</strong> = {point6_h.toFixed(2)} ft</div>
                    <div><strong>Least Width</strong> = {leastWidth.toFixed(2)} ft</div>
                </div>
                <div style={{ marginTop: '5px', fontSize: '0.8em', color: '#666' }}>
                    * Values calculated based on current building geometry.
                </div>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', gap: '40px' }}>

                {/* ASCE 7-22 */}
                <div style={{ textAlign: 'center' }}>
                    <div style={{ fontWeight: 'bold', fontSize: '1.2em', marginBottom: '10px' }}>ASCE 7-22</div>
                    <img src={asce7_22} alt="ASCE 7-22 Zones" style={{ maxWidth: '100%', border: '1px solid #ccc' }} />
                </div>

                <hr style={{ borderTop: '2px dashed #eee' }} />

                {/* ASCE 7-16 */}
                <div style={{ textAlign: 'center' }}>
                    <div style={{ fontWeight: 'bold', fontSize: '1.2em', marginBottom: '10px' }}>ASCE 7-16</div>
                    <img src={asce7_16} alt="ASCE 7-16 Zones" style={{ maxWidth: '100%', border: '1px solid #ccc' }} />
                </div>

                <hr style={{ borderTop: '2px dashed #eee' }} />

                {/* ASCE 7-10 & earlier */}
                <div style={{ textAlign: 'center' }}>
                    <div style={{ fontWeight: 'bold', fontSize: '1.2em', marginBottom: '10px' }}>ASCE 7-10 & earlier</div>
                    <img src={asce7_10} alt="ASCE 7-10 Zones" style={{ maxWidth: '100%', border: '1px solid #ccc' }} />
                </div>

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