import React from "react";

export type ConfigFieldType =
  | "text"
  | "number"
  | "switch"
  | "select"
  | "textarea"
  | "color"
  | "slider"
  | "multi-select"
  | "key-value"
  | "column-picker";

export interface ConfigOption {
  label: string;
  value: string;
  description?: string;
}

export interface ConfigFieldDefinition<T = any> {
  key: string;
  label: string;
  type: ConfigFieldType;
  description?: string;
  placeholder?: string;
  options?: ConfigOption[];
  min?: number;
  max?: number;
  step?: number;
  condition?: (config: T) => boolean;
  disabled?: (config: T) => boolean;
}

export interface ConfigSectionDefinition<T = any> {
  id: string;
  title: string;
  description?: string;
  collapsible?: boolean;
  defaultOpen?: boolean;
  fields: ConfigFieldDefinition<T>[];
  condition?: (config: T) => boolean;
}

export interface ConfigPanelBuilderProps<T = any> {
  config: T;
  onChange: (key: string, value: any) => void;
  sections: ConfigSectionDefinition<T>[];
  presets?: Array<{
    label: string;
    description?: string;
    values: Partial<T>;
  }>;
  tableColumns?: ConfigOption[];
  children?: React.ReactNode;
}
