"use strict";

const React = require("react");

const useTheme = require("../../util/themeable");
const defaultStyle = require("./style.css");
const generateGridItemStyle = require("../../util/generate-grid-item-style");

module.exports = function ProgressBar({ x, y, progress, color }) {
	// FIXME: Make color a theme thing
	let { withTheme } = useTheme({ control: "progressBar", defaultStyle });

	return (
		<div className={withTheme("uilibComponent", "bar")} style={generateGridItemStyle({ x, y })}>
			<div className={withTheme("fill")} style={{width: `${progress * 100}%`, backgroundColor: color}} />
		</div>
	);
};