import React from 'react';

// Import images
import imgNormal from '../../../assets/wind_normal_to_ridge.png';
import imgParallel from '../../../assets/wind_parallel_to_ridge.png';
import imgTypical from '../../../assets/typical_wind_loading.png';

export const MwfrsDirectionalDiagram: React.FC = () => {
    return (
        <div className="flex-col gap-md" style={{ alignItems: 'center' }}>
            {/* Diagram 1: Wind Normal to Ridge */}
            <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: '0.9em', fontWeight: 'bold', marginBottom: '5px' }}>
                    WIND NORMAL TO RIDGE
                </div>
                <img src={imgNormal} alt="Wind Normal to Ridge" style={{ maxWidth: '100%', height: 'auto', border: '1px solid #ddd' }} />
            </div>

            {/* Diagram 2: Wind Parallel to Ridge */}
            <div style={{ textAlign: 'center' }}>
                <div style={{ fontSize: '0.9em', fontWeight: 'bold', marginBottom: '5px' }}>
                    WIND PARALLEL TO RIDGE
                </div>
                <img src={imgParallel} alt="Wind Parallel to Ridge" style={{ maxWidth: '100%', height: 'auto', border: '1px solid #ddd' }} />
            </div>

            {/* Diagram 3: Typical Wind Loading */}
            <div style={{ textAlign: 'center', marginTop: '10px' }}>
                <div style={{ fontSize: '0.9em', fontWeight: 'bold', marginBottom: '5px' }}>
                    TYPICAL WIND LOADING
                </div>
                <img src={imgTypical} alt="Typical Wind Loading" style={{ maxWidth: '100%', height: 'auto', border: '1px solid #ddd' }} />
            </div>
        </div>
    );
};