import React, { useMemo } from "react";
import classNames from "classnames";
import { useControllableValue } from "ahooks";
import "./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 = useMemo(() => {
		return { "--color-item-background-color": color };
	}, [color]);
	return /* @__PURE__ */ React.createElement("span", {
		onClick,
		className: classNames("color-item", { ["color-item-active"]: active }),
		style
	});
};
const Color = (props) => {
	const { value, onChange, defaultValue } = props;
	const [state, setState] = useControllableValue(props);
	return /* @__PURE__ */ React.createElement("div", null, colorArr.map((item) => /* @__PURE__ */ React.createElement(ColorItem, {
		key: item,
		color: item,
		active: state === item,
		onClick: () => setState === null || setState === void 0 ? void 0 : setState(item)
	})));
};
//#endregion
export { Color as default };
