import React from 'react';

export const MwfrsLongitudinalFramesDiagram: React.FC = () => {
    const strokeStyle = { stroke: 'black', strokeWidth: 1.5, fill: 'none' };
    const dashedStyle = { stroke: 'black', strokeWidth: 1, strokeDasharray: '4', fill: 'none' };
    const textStyle = { fontSize: '10px', textAnchor: 'middle' as const, stroke: 'none', fill: 'black' };

    return (
        <svg width="350" height="220" viewBox="0 0 350 220">
            <defs>
                <marker id="arrowhead-iso" markerWidth="6" markerHeight="4" refX="6" refY="2" orient="auto">
                    <polygon points="0 0, 6 2, 0 4" fill="black" />
                </marker>
            </defs>

            {/* Isometric Projection Approximation */}

            {/* Frames (3D effect) */}
            {/* Front Frame (Left) */}
            <path d="M50 100 L50 60 L100 40 L150 60 L150 100" style={strokeStyle} />

            {/* Back Frame (Right) - Offset x+150, y-30 */}
            <path d="M200 70 L200 30 L250 10 L300 30 L300 70" style={strokeStyle} />

            {/* Connecting Ridge and Eaves (Longitudinal Lines) */}
            <line x1="50" y1="60" x2="200" y2="30" style={strokeStyle} /> {/* Left Eave */}
            <line x1="100" y1="40" x2="250" y2="10" style={strokeStyle} /> {/* Ridge */}
            <line x1="150" y1="60" x2="300" y2="30" style={strokeStyle} /> {/* Right Eave */}

            {/* Intermediate Frames (Dashed) */}
            {/* Frame 2 */}
            <path d="M80 94 L80 54 L130 34 L180 54 L180 94" style={dashedStyle} />
            {/* Frame 3 */}
            <path d="M110 88 L110 48 L160 28 L210 48 L210 88" style={dashedStyle} />
            {/* Frame 4 */}
            <path d="M140 82 L140 42 L190 22 L240 42 L240 82" style={dashedStyle} />

            {/* End Wall Solid Area (Hatched Region on Front Frame) */}
            <path d="M50 100 L50 60 L100 80 L50 100" fill="url(#hatch)" opacity="0.5" />
            {/* Just a symbolic patch to represent As */}
            <rect x="30" y="80" width="40" height="30" fill="none" stroke="black" transform="skewY(-20)" />
            {/* Let's draw a seperate "As" indication as in diagram */}
            <g transform="translate(10, 110)">
                <rect x="0" y="0" width="60" height="40" fill="#ddd" stroke="black" />
                <text x="30" y="25" style={textStyle}>End Wall Portion</text>
                <line x1="60" y1="20" x2="80" y2="10" style={{ stroke: 'black', markerEnd: 'url(#arrowhead-iso)' }} />
            </g>

            {/* Dimensions */}
            {/* B (Width) */}
            <line x1="50" y1="110" x2="150" y2="110" style={strokeStyle} />
            <line x1="50" y1="108" x2="50" y2="112" style={strokeStyle} />
            <line x1="150" y1="108" x2="150" y2="112" style={strokeStyle} />
            <text x="100" y="125" style={{ ...textStyle, fontSize: '12px', fontWeight: 'bold' }}>B</text>

            {/* Wind Direction Arrow */}
            <g transform="translate(30, 160) rotate(-30)">
                <line x1="0" y1="0" x2="40" y2="0" style={{ stroke: 'black', strokeWidth: 2, markerEnd: 'url(#arrowhead-iso)' }} />
                <text x="20" y="-10" style={textStyle}>WIND</text>
                <text x="20" y="15" style={textStyle}>DIRECTION</text>
            </g>

            {/* Text Labels */}
            <text x="70" y="90" style={textStyle}>Ae</text>
            <text x="130" y="90" style={textStyle}>As</text>
            <text x="250" y="100" style={{ ...textStyle, fontWeight: 'bold' }}>n = 5</text>
            <text x="250" y="115" style={textStyle}>SHOWN</text>

        </svg>
    );
};