import { ColorPicker } from '@wordpress/components';
import ResponsiveControl from "../../ResponsiveControl";
import { useResponsiveTab } from "../../ResponsiveTabContext";

const BackgroundColorSetting = ({ attributes, setAttributes }) => {
  const { activeTab } = useResponsiveTab();

  const handleColorChange = (color) => {
    setAttributes({ [`backgroundColor${activeTab.toUpperCase()}`]: color.hex });
  };

  return <ResponsiveControl>{(device) => <ColorPicker color={attributes[`backgroundColor${device.toUpperCase()}`]} onChangeComplete={handleColorChange} disableAlpha />}</ResponsiveControl>;
};

export default BackgroundColorSetting;
