"use strict";

const React = require("react");

const useTheme = require("../../util/themeable");
const defaultStyle = require("./style.css");

module.exports = function RibbonBox({ label, children, width, height }) {
	let { withTheme } = useTheme({ control: "ribbonBox", defaultStyle });

	// FIXME: How to handle width/height here? Is the current approach correct? Or should we let the user override this through a class?

	return (
		<div className={withTheme("uilibComponent", "box")} style={{width: width, height: height}}>
			<div className={withTheme("contents")}>
				{children}
			</div>

			<div className={withTheme("label")} title={label}>
				{label}
			</div>
		</div>
	);
};