export const LoadsDiagram = () => {
    return (
        <div className="diagram-container" style={{ marginTop: '20px', maxWidth: '400px' }}>
            <div className="diagram-title">Load Sign Convention</div>
            <div className="diagram-svg-container">
                <svg width="300" height="250" viewBox="0 0 300 250">
                    <defs>
                        <marker id="arrowHead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
                            <path d="M0,0 L0,6 L9,3 z" fill="#0078d4" />
                        </marker>
                        <marker id="arrowHeadBlack" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
                            <path d="M0,0 L0,6 L9,3 z" fill="#333" />
                        </marker>
                    </defs>

                    {/* Isometric Block (Pile Cap) */}
                    <path d="M50,150 L150,200 L250,150 L150,100 z" fill="#f4e1d2" stroke="#333" strokeWidth="1" />
                    <path d="M50,150 L50,180 L150,230 L150,200 z" fill="#dcbfa6" stroke="#333" strokeWidth="1" />
                    <path d="M150,230 L250,180 L250,150 L150,200 z" fill="#c0a080" stroke="#333" strokeWidth="1" />

                    {/* Column Stub */}
                    <path d="M130,130 L170,130 L170,110 L130,110 z" fill="#e0e0e0" stroke="#333" strokeWidth="1" transform="translate(0, -20)" />
                    <path d="M130,130 L130,170 L170,170 L170,130 z" fill="#ccc" stroke="#333" strokeWidth="1" transform="translate(0, -20)" /> {/* Front face */}
                    <path d="M170,170 L170,130 L190,120 L190,160 z" fill="#bbb" stroke="#333" strokeWidth="1" transform="translate(0, -20)" /> {/* Side face */}

                    {/* Top of Column (Target for loads) */}
                    <path d="M130,110 L170,110 L190,100 L150,100 z" fill="#eee" stroke="#333" strokeWidth="1" transform="translate(0, -20)" />

                    {/* Axes */}
                    <line x1="250" y1="150" x2="290" y2="130" stroke="#333" strokeWidth="1" strokeDasharray="4 2" markerEnd="url(#arrowHeadBlack)" />
                    <text x="295" y="130" fontSize="12" fontWeight="bold">X</text>

                    <line x1="50" y1="150" x2="10" y2="130" stroke="#333" strokeWidth="1" strokeDasharray="4 2" markerEnd="url(#arrowHeadBlack)" />
                    <text x="0" y="130" fontSize="12" fontWeight="bold">Z</text>

                    {/* Loads */}
                    {/* Axial P */}
                    <line x1="160" y1="40" x2="160" y2="80" stroke="#0078d4" strokeWidth="3" markerEnd="url(#arrowHead)" />
                    <text x="165" y="50" fontSize="14" fill="#0078d4" fontWeight="bold">P</text>

                    {/* Moment Mx (Rotation about X) */}
                    <path d="M120,80 Q110,90 120,100" fill="none" stroke="#0078d4" strokeWidth="2" markerEnd="url(#arrowHead)" />
                    <text x="100" y="90" fontSize="12" fill="#0078d4" fontWeight="bold">Mx</text>

                    {/* Moment Mz (Rotation about Z) */}
                    <path d="M200,80 Q210,90 200,100" fill="none" stroke="#0078d4" strokeWidth="2" markerEnd="url(#arrowHead)" />
                    <text x="215" y="90" fontSize="12" fill="#0078d4" fontWeight="bold">Mz</text>

                    {/* Shear Vx */}
                    <line x1="180" y1="100" x2="220" y2="100" stroke="#0078d4" strokeWidth="2" markerEnd="url(#arrowHead)" transform="rotate(-26 180 100)" />
                    <text x="210" y="85" fontSize="12" fill="#0078d4" fontWeight="bold">Vx</text>

                    {/* Shear Vz */}
                    <line x1="140" y1="100" x2="100" y2="100" stroke="#0078d4" strokeWidth="2" markerEnd="url(#arrowHead)" transform="rotate(26 140 100)" />
                    <text x="100" y="85" fontSize="12" fill="#0078d4" fontWeight="bold">Vz</text>

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