const require_runtime = require("../../../../_virtual/_rolldown/runtime.js");
let react = require("react");
react = require_runtime.__toESM(react);
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let ahooks = require("ahooks");
require("./Color.less");
//#region src/components/workSpaceList/components/AppearanceEdit/Color.tsx
const colorArr = [
	"#7F56D9",
	"#D92D20",
	"#DC6803",
	"#039855",
	"#3E4784",
	"#088AB2",
	"#444CE7",
	"#BA24D5",
	"#CA8504",
	"#475467"
];
const ColorItem = (props) => {
	const { color, active, onClick } = props;
	const style = (0, react.useMemo)(() => {
		return { "--color-item-background-color": color };
	}, [color]);
	return /* @__PURE__ */ react.default.createElement("span", {
		onClick,
		className: (0, classnames.default)("color-item", { ["color-item-active"]: active }),
		style
	});
};
const Color = (props) => {
	const { value, onChange, defaultValue } = props;
	const [state, setState] = (0, ahooks.useControllableValue)(props);
	return /* @__PURE__ */ react.default.createElement("div", null, colorArr.map((item) => /* @__PURE__ */ react.default.createElement(ColorItem, {
		key: item,
		color: item,
		active: state === item,
		onClick: () => setState === null || setState === void 0 ? void 0 : setState(item)
	})));
};
//#endregion
exports.default = Color;
