import { mergeProps } from "solid-js";

import "./water.css"

function water(props) {
    const parentProps = mergeProps(props);
    return <div id="waterBox" class="waterBox">
        <div class="wave">
            <div class="wave-text">
                {parentProps.text}
                <p>{parentProps.percentage}%</p>
            </div>
            <div class="wave-mask" style={'top:' + (240 - Math.ceil(parentProps.percentage / 100 * 80)) + '%'}></div>
        </div>
    </div>
}

export default water;
