import { __ } from "@wordpress/i18n";
import { useState } from "@wordpress/element";
import { Spacing, ButtonGroup, ColorPicker } from "@easy-accordion/components";
import { borderStyles } from "@easy-accordion/constants";
import "./editor.scss";
const FlatBorder = ({
attributes,
attributesKey,
setAttributes,
defaultValue = {
unit: "px",
value: {
top: "0",
right: "0",
bottom: "0",
left: "0",
},
},
showColorPicker = true,
}) => {
const { border, borderWidth } = attributes;
const [activeState, setActiveState] = useState("color");
const borderColor = (newColor) => {
setAttributes({
[attributesKey.border]: {
...attributes?.border,
[activeState]: newColor,
},
});
};
const borderOptions = {
color: "Default",
hoverColor: "Hover",
activeColor: "Active",
};
const borderColorOptions = Object.entries(borderOptions).reduce(
(acc, [key, label]) => (key === "color" || key in border ? [...acc, { label, value: key }] : acc),
[]
);
return (
{
setAttributes({
[attributesKey.border]: {
...attributes.border,
style: newStyle,
},
});
}}
/>
{/* Border Color */}
{showColorPicker && (
<>
{borderColorOptions?.length > 1 && (
setActiveState(value)}
/>
)}
)}
);
};
export default FlatBorder;