import { __ } from "@wordpress/i18n";
import FontColorSetting from "../font/FontColorSetting";
import PanelBodyWithSync from "../../PanelBodyWithSync";

const IconFrameColorSetting = ({ attributes, setAttributes, title, initialOpen = false, panelState, onTogglePanel, isHoverState = false }) => {
  const suffix = isHoverState ? "Hover" : "";
  const colorAttrName = `iconFrameBgColor${suffix}`;
  const alphaAttrName = `iconFrameBgColorAlpha${suffix}`;

  return (
    <PanelBodyWithSync title={title || __("Color", "zenblocks")} initialOpen={initialOpen || panelState} onToggle={onTogglePanel} className="zenblocks-nested-panel" titleClassName="zenblocks-panel-title--no-margin" level={3} panelType="settings" panelName="icon-frame-color">
      <FontColorSetting
        label={__("Background Color", "zenblocks")}
        colorValue={attributes[colorAttrName] || attributes.iconFrameBgColor}
        alphaValue={attributes[alphaAttrName] !== undefined ? attributes[alphaAttrName] : 1}
        onColorChange={(value) => setAttributes({ [colorAttrName]: value })}
        onAlphaChange={(value) => setAttributes({ [alphaAttrName]: value })}
        enableAlpha={true}
      />
    </PanelBodyWithSync>
  );
};

export default IconFrameColorSetting;
