import { t } from '@/lib/i18n';
import { ButtonStyleEditor, ButtonStyleValue } from './ButtonStyleEditor';
import { PresetGlobalValues, type HeaderAvatarIconName } from '../../types/appearance';

export interface IconOnlyButtonStyleControlValue {
  icon: HeaderAvatarIconName;
  style: ButtonStyleValue;
}

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

/**
 * Canonical template for styling an icon-only button:
 * - Icon selection via `LucideIconPicker`
 * - Full button styling via `ButtonStyleEditor` with typography hidden
 *
 * (Protocol: icon-only buttons must not be implemented via ad-hoc single-field inputs.)
 */
export function IconOnlyButtonStyleControl({
  label,
  value,
  globalValues,
  onChange,
  disabled = false,
}: IconOnlyButtonStyleControlProps) {
  const normalizedStyle: ButtonStyleValue = {
    ...value.style,
    icon: {
      ...(value.style as any)?.icon,
      icon: value.icon,
      position: 'only',
    },
  };

  return (
    <div className="space-y-3">
      <div className="text-sm font-medium text-gray-700">{label}</div>

      <ButtonStyleEditor
        value={normalizedStyle}
        onChange={(style) =>
          onChange({
            icon: (((style as any)?.icon?.icon || value.icon) as HeaderAvatarIconName),
            style: {
              ...(style as any),
              icon: {
                ...(style as any)?.icon,
                position: 'only',
              },
            } as ButtonStyleValue,
          })
        }
        globalValues={globalValues}
        label={t('Button Style (Icon Only)')}
        disabled={disabled}
        showIcon={true}
        showIconPicker={true}
        showTypography={false}
      />
    </div>
  );
}


