import { PanelBody } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { ResponsiveTabProvider } from "../../ResponsiveTabContext";

// スペーシング設定用モジュール
import SpacingPaddingSetting from "../../settings-modules/spacing/SpacingPaddingSettingV2";
import SpacingMarginSetting from "../../settings-modules/spacing/SpacingMarginSettingV2";

/**
 * スペーシング設定コンポーネント
 *
 * @param {Object} props コンポーネントのプロパティ
 * @param {Object} props.attributes ブロックの属性
 * @param {Function} props.setAttributes 属性を更新する関数
 * @param {string} props.title パネルのタイトル
 * @param {boolean} props.initialOpen パネルの初期状態
 * @returns {JSX.Element} スペーシング設定パネル
 */
const SpacingBasic = ({ attributes, setAttributes, title = __("Spacing Settings", "zenblocks"), initialOpen = false }) => {
  return (
    <PanelBody title={title} initialOpen={initialOpen}>
      <ResponsiveTabProvider>
        <SpacingPaddingSetting attributes={attributes} setAttributes={setAttributes} title={__("Padding", "zenblocks")} initialOpen={false} />
        <SpacingMarginSetting attributes={attributes} setAttributes={setAttributes} title={__("Margin", "zenblocks")} initialOpen={false} />
      </ResponsiveTabProvider>
    </PanelBody>
  );
};

export default SpacingBasic;
