import { useWindStore } from '../../store/windStore';
import wallGt60 from '../../assets/diagrams/wall-gt-60.png';
import wallLt60 from '../../assets/diagrams/wall-lt-60.png';

export const WallZonesDiagram = () => {
    const { inputs } = useWindStore();
    // "h" in ASCE usually Mean Roof Height, or Eave Height depending on context. 
    // Diagram says "h <= 60 ft". 
    // Let's use MEAN roof height.
    const meanRoofHeight = (inputs.dimensions.ridgeHeight + inputs.dimensions.eaveHeight) / 2;

    // Check if > 60
    const isGt60 = meanRoofHeight > 60;
    const imgSrc = isGt60 ? wallGt60 : wallLt60;
    const label = isGt60 ? "Wall Zones (h > 60 ft)" : "Wall Zones (h ≤ 60 ft)";

    return (
        <div className="card report-section">
            <div className="report-section-title">Wall Zones</div>
            <div style={{ textAlign: 'center', padding: '10px' }}>
                <div style={{ marginBottom: '8px', fontWeight: 600 }}>{label}</div>
                <div style={{
                    border: '1px solid #eee',
                    background: '#fff',
                    padding: '10px',
                    borderRadius: '8px',
                    display: 'inline-block'
                }}>
                    <img
                        src={imgSrc}
                        alt="Wall Zones Diagram"
                        style={{ maxWidth: '100%', maxHeight: '400px', height: 'auto' }}
                    />
                </div>
            </div>
        </div>
    );
};