import * as React from "react";
import { SectionItemProps } from "./SectionItem/types";
import { EditorObjectState } from "@sc/modules/v2/Editor/components/EditorObject/types";
export interface SectionsLegendProps {
  /**
   * The caption that shows at the top of the section legend
   */
  title?: string;

  /**
   * The style to use as the container for the legend
   */
  style?: React.CSSProperties;

  /**
   * An array of section item settings.  Used to generate a list of sections.  This is usually derived from the page content data
   */
  sections?: SectionItemProps[];
  // sections?: any[];

  /**
   * Triggers when the user initiates a change of some kind to the sections in the section item (such as drag-and-drop to re-order).  Returns an updated list of section item
   */
  // onChange?: (sections: SectionItemProps[]) => any;
  onChange?: (id1: string, id2: string) => any;

  /**
   * Triggers when the user performs an action on a Section Item that should change the state (active, normal, hover)
   */
  onChangeState?: (id: string, state: EditorObjectState) => any;

  /**
   * Triggers when the user clicks the [Add Section] button
   */
  onCreate?: () => void;
}