import React from 'react';

export const TornadoMwfrsDiagrams: React.FC = () => {
    return (
        <div style={{ display: 'flex', gap: '30px', marginTop: '20px' }}>

            {/* Wind Normal to Ridge */}
            <div style={{ textAlign: 'center' }}>
                <svg width="200" height="150" viewBox="0 0 200 150">
                    <defs>
                        <marker id="arrow" markerWidth="6" markerHeight="6" refX="3" refY="3" orient="auto">
                            <path d="M0,0 L6,3 L0,6 L0,0" fill="transparent" stroke="black" />
                        </marker>
                    </defs>

                    {/* Isometric Cube (approx) */}
                    <path d="M50,40 L100,20 L150,40 L100,60 Z" fill="none" stroke="black" strokeWidth="1" /> {/* Top/Roof */}
                    <path d="M50,40 L50,90 L100,110 L150,90 L150,40" fill="none" stroke="black" strokeWidth="1" /> {/* Walls */}
                    <path d="M100,110 L100,60" fill="none" stroke="black" strokeWidth="1" /> {/* Vertical Edge */}

                    {/* Annotations */}
                    <text x="30" y="70" fontSize="10">LW</text>
                    <text x="120" y="30" fontSize="10">LR</text>
                    <text x="70" y="80" fontSize="10">WW</text>
                    <text x="160" y="70" fontSize="10">SW</text>

                    {/* Dimensions */}
                    <text x="40" y="100" fontSize="10">L</text>
                    <text x="120" y="100" fontSize="10">B</text>

                    {/* Wind Arrow */}
                    <text x="80" y="140" fontSize="10" fontWeight="bold">WIND NORMAL TO RIDGE</text>
                    <path d="M50,130 L90,110" stroke="black" strokeWidth="2" markerEnd="url(#arrow)" />
                    <text x="50" y="125" fontSize="10" fontWeight="bold">WIND DIRECTION</text>

                </svg>
            </div>

            {/* Wind Parallel to Ridge */}
            <div style={{ textAlign: 'center' }}>
                <svg width="200" height="150" viewBox="0 0 200 150">
                    {/* Same Isometric Cube */}
                    <path d="M50,40 L100,20 L150,40 L100,60 Z" fill="none" stroke="black" strokeWidth="1" />
                    <path d="M50,40 L50,90 L100,110 L150,90 L150,40" fill="none" stroke="black" strokeWidth="1" />
                    <path d="M100,110 L100,60" fill="none" stroke="black" strokeWidth="1" />

                    {/* Annotations */}
                    <text x="30" y="70" fontSize="10">SW</text>
                    <text x="130" y="30" fontSize="10">WR</text>
                    <text x="70" y="35" fontSize="10">WR</text>
                    <text x="160" y="70" fontSize="10">LW</text>
                    <text x="70" y="90" fontSize="10">WW</text>

                    {/* Dimensions */}
                    <text x="40" y="100" fontSize="10">B</text>
                    <text x="120" y="100" fontSize="10">L</text>

                    {/* Wind Arrow */}
                    <text x="80" y="140" fontSize="10" fontWeight="bold">WIND PARALLEL TO RIDGE</text>
                    <path d="M130,130 L100,110" stroke="black" strokeWidth="2" markerEnd="url(#arrow)" />
                    <text x="120" y="125" fontSize="10" fontWeight="bold">WIND DIRECTION</text>
                </svg>
            </div>

        </div>
    );
};