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

// カードスタイル用背景設定モジュール
import CardStyleBackgroundColorSetting from "./CardStyleBackgroundColorSetting";
import CardStyleBackgroundImageSetting from "./CardStyleBackgroundImageSetting";
import CardStyleBackgroundPatternSetting from "./CardStyleBackgroundPatternSetting";
// カードスタイル用文字色設定モジュール
import CardStyleTextColorSetting from "./CardStyleTextColorSetting";

/**
 * カードスタイル用統合背景設定コンポーネント
 *
 * @param {Object} props コンポーネントのプロパティ
 * @param {Object} props.attributes ブロックの属性
 * @param {Function} props.setAttributes 属性を更新する関数
 * @param {string} props.title パネルのタイトル
 * @param {boolean} props.initialOpen パネルの初期状態
 * @returns {JSX.Element} カードスタイル背景設定パネル
 */
const CardStyleBackgroundBasic = ({ attributes, setAttributes, title = __("Card Style", "zenblocks"), initialOpen = false }) => {
  return (
    <PanelBody title={title} initialOpen={initialOpen}>
      <p className="card-style-description" style={{ paddingTop: "10px", marginBottom: "15px" }}>
        {__("Automatically applies background styles to all cards within the column. Changes are applied automatically.", "zenblocks")}
      </p>
      <ResponsiveTabProvider>
        <CardStyleBackgroundColorSetting attributes={attributes} setAttributes={setAttributes} title={__("Background Color", "zenblocks")} initialOpen={false} />
        <CardStyleBackgroundImageSetting attributes={attributes} setAttributes={setAttributes} title={__("Background Image", "zenblocks")} initialOpen={false} />
        <CardStyleBackgroundPatternSetting attributes={attributes} setAttributes={setAttributes} title={__("Background Pattern", "zenblocks")} initialOpen={false} />
        <CardStyleTextColorSetting attributes={attributes} setAttributes={setAttributes} title={__("Text Color", "zenblocks")} initialOpen={false} />
      </ResponsiveTabProvider>
    </PanelBody>
  );
};

export default CardStyleBackgroundBasic;
