import { ButtonStyleEditor, ButtonStyleValue } from './ButtonStyleEditor';
import { PresetGlobalValues } from '../../types/appearance';

interface IconOnlyButtonSurfaceStyleControlProps {
  label: string;
  value: ButtonStyleValue;
  globalValues: PresetGlobalValues;
  onChange: (next: ButtonStyleValue) => void;
  disabled?: boolean;
}

/**
 * Canonical template for styling an icon-only button when the icon itself is NOT user-configurable
 * (e.g., Close / Prev / Next in a lightbox). This avoids ad-hoc per-field inputs while keeping
 * the icon surface + icon color/size editable via the button template.
 */
export function IconOnlyButtonSurfaceStyleControl({
  label,
  value,
  globalValues,
  onChange,
  disabled = false,
}: IconOnlyButtonSurfaceStyleControlProps) {
  const normalized: ButtonStyleValue = {
    ...(value as any),
    icon: {
      ...(value as any)?.icon,
      position: 'only',
    },
  };

  return (
    <ButtonStyleEditor
      value={normalized}
      onChange={(v) =>
        onChange({
          ...(v as any),
          icon: {
            ...(v as any)?.icon,
            position: 'only',
          },
        } as ButtonStyleValue)
      }
      globalValues={globalValues}
      label={label}
      disabled={disabled}
      showIcon={true}
      showTypography={false}
    />
  );
}



