import { CSSProperties, ReactNode } from "react";
import { IconSource } from "@sc/plugins/webcomponents/v2/Icon/types";
import { IPropertyBuilderSettings } from "@sc/modules/v2/Properties/components/generator/types";

export enum ComponentTypes {
  SECTION = "Section",
  GRID = "Grid",
  GRIDITEM = "GridItem",
  HEADLINE = "Headline",
  TEXT = "Text",
  VIDEO = "Video",
  IMAGE = "Image",
  CONTAINER = "Container",
  CURSOR = "Cursor",
  STEPPER = "Stepper",
  STEP = "Step",
  GROUP = "Group",
  SPACER = "Spacer",
  DIVIDER = "Divider",
  FORM = "Form",
  FORMFIELD = "Form Field",
  NAVIGATION = "Navigation",
  BUTTON = "AdvancedButton",
  TABLE = "Table",
  ANIMATION = "Animation",
  LIST = "List",
  LISTITEM = "ListItem",
  POPUP = "Popup",
  PROGRESS = "Progress",
  BLOCK = "Block",
  ICON = "Icon",
  REPEATER = "Repeater",
  ACCORDIAN = "Accordian",
  ACCORDIANITEM = "AccordianItem",
  GOOGLELOGIN = "GoogleLogin",
  FACEBOOKLOGIN = "FacebookLogin",
  COUNTDOWN = "Countdown",
  SHAREBUTTON = "ShareButton",
  ORDERSUMMARY = "OrderSummary",
  SHAPES = "Shapes",
  STACKS = "Stacks",
  SWITCH = "Switch",
  SMARTCONTAINER = "SmartContainer",
  FACEBOOKCOMMENTS = "FacebookComments",
  BODY = "Body",
  HTML = "HTML",
  TESTING = "TESTING",
  COLUMNS = "Columns",
  COLUMN = "Column",
  PICTURE = "Picture",
}

export interface IComponentSettings {
  id: string;
  name: string;
  description?: string;
  thumbnail:
    | {
        image?: string;
        style?: CSSProperties;
        icon?: string | ReactNode;
        iconSource?: IconSource;
        iconStyle?: CSSProperties;
      }
    | string;
  default: any;
  properties?: IPropertyBuilderSettings;
}