/**
 * パディング設定を適用するコンテナコンポーネント
 */
import './style.scss';

/**
 * フロントエンド表示用のパディングコンテナコンポーネント
 * 
 * @param {Object} props - コンポーネントのプロパティ
 * @param {Object} props.attributes - パディング属性を含むオブジェクト
 * @param {string} props.className - 追加のクラス名（オプション）
 * @param {React.ReactNode} props.children - 子要素
 * @param {Object} props.style - 追加のスタイル（オプション）
 * @return {JSX.Element} パディング適用済みのコンテナ
 */
export const SpacingPaddingContainer = ({ attributes, className = "", children, style = {}, ...rest }) => {
  // パディング関連のスタイルを作成
  const paddingStyle = {
    // PC用のパディング設定
    "--spacing-padding-top-pc": `${attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingTopPC : attributes.spacingPaddingPC}${attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingUnitTopPC || 'px' : attributes.spacingPaddingUnitPC || 'px'}`,
    "--spacing-padding-right-pc": `${attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingRightPC : attributes.spacingPaddingPC}${attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingUnitRightPC || 'px' : attributes.spacingPaddingUnitPC || 'px'}`,
    "--spacing-padding-bottom-pc": `${attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingBottomPC : attributes.spacingPaddingPC}${attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingUnitBottomPC || 'px' : attributes.spacingPaddingUnitPC || 'px'}`,
    "--spacing-padding-left-pc": `${attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingLeftPC : attributes.spacingPaddingPC}${attributes.spacingPaddingUseIndividualPC ? attributes.spacingPaddingUnitLeftPC || 'px' : attributes.spacingPaddingUnitPC || 'px'}`,
    // SP用のパディング設定
    "--spacing-padding-top-sp": `${attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingTopSP : attributes.spacingPaddingSP}${attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingUnitTopSP || 'px' : attributes.spacingPaddingUnitSP || 'px'}`,
    "--spacing-padding-right-sp": `${attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingRightSP : attributes.spacingPaddingSP}${attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingUnitRightSP || 'px' : attributes.spacingPaddingUnitSP || 'px'}`,
    "--spacing-padding-bottom-sp": `${attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingBottomSP : attributes.spacingPaddingSP}${attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingUnitBottomSP || 'px' : attributes.spacingPaddingUnitSP || 'px'}`,
    "--spacing-padding-left-sp": `${attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingLeftSP : attributes.spacingPaddingSP}${attributes.spacingPaddingUseIndividualSP ? attributes.spacingPaddingUnitLeftSP || 'px' : attributes.spacingPaddingUnitSP || 'px'}`,
    ...style
  };

  return (
    <div className={`zenblocks-spacing-padding-container ${className}`} style={paddingStyle} {...rest}>
      {children}
    </div>
  );
};
