/**
 * ContainerSpacingTab Component
 *
 * Tab content for container spacing settings (padding/margin).
 * Supports both compact (floating) and non-compact (sidebar) modes.
 */

import type {ContainerSettings} from "@/types";
import {PaddingGroup, MarginGroup} from "../groups";

interface ContainerSpacingTabProps {
  /** Container settings */
  containerSettings: ContainerSettings;
  /** Called when settings change */
  onUpdate: (updates: Partial<ContainerSettings>) => void;
  /** Use compact styling for floating panels */
  compact?: boolean;
}

export function ContainerSpacingTab({
  containerSettings,
  onUpdate,
  compact = true,
}: ContainerSpacingTabProps) {
  const sectionClass = compact
    ? "floating-settings__section floating-settings__section--scrollable"
    : "settings-section";

  return (
    <div className={sectionClass}>
      {/* Padding Group */}
      <PaddingGroup
        padding={containerSettings.padding}
        onUpdate={(padding) => onUpdate({padding})}
        compact={compact}
      />

      {/* Margin Group */}
      <MarginGroup
        margin={containerSettings.margin}
        onUpdate={(margin) => onUpdate({margin})}
        compact={compact}
      />
    </div>
  );
}

export default ContainerSpacingTab;
