import getPathPrefix from "../../../../utils/getPathPrefix";

function Wall({ className, onSelect, onMouseEnter, onMouseLeave }) {
    return (
        <svg
            width="1920"
            height="1080"
            viewBox="0 0 1920 1080"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            xmlnsXlink="http://www.w3.org/1999/xlink"
            className={className}
        >
            <g id="wall">
                <rect
                    className="done"
                    x="0.5"
                    y="0.5"
                    width="1919"
                    height="1079"
                    fill="url(#pattern0_18_110)"
                    stroke="black"
                />
                <g className="default">
                    <path
                        className="button"
                        d="M789.5 702V848.5L590 961V816.5L789.5 702Z"
                        fill="white"
                    />
                    <path
                        className="button"
                        d="M1122 510.5L1119.5 657L932 764.5L929.5 621L1122 510.5Z"
                        fill="white"
                    />
                </g>
                <path
                    className="button"
                    d="M795 688.5V855L583 973.5V808.5L795 688.5Z"
                    fill="transparent"
                    onClick={onSelect}
                    onMouseEnter={onMouseEnter}
                    onMouseLeave={onMouseLeave}
                />
                <path
                    className="button"
                    d="M1132 495V661.5L920 780V615L1132 495Z"
                    fill="transparent"
                    onClick={onSelect}
                    onMouseEnter={onMouseEnter}
                    onMouseLeave={onMouseLeave}
                />
            </g>
            <defs>
                <pattern
                    id="pattern0_18_110"
                    patternContentUnits="objectBoundingBox"
                    width="1"
                    height="1"
                >
                    <image
                        xlinkHref={`${getPathPrefix('/images/game/chapter3/wall-done.png')}`}
                        transform="scale(0.000520833 0.000925926)"
                    />
                </pattern>
                <pattern
                    id="pattern1_18_110"
                    patternContentUnits="objectBoundingBox"
                    width="1"
                    height="1"
                >
                    <image
                        xlinkHref={`${getPathPrefix('/images/game/chapter3/wall-default.png')}`}
                        transform="scale(0.000520833 0.000925926)"
                    />
                </pattern>
            </defs>
        </svg>
    );
}

export default Wall;
