import React from "react";
import { LinkProps } from "react-router-dom";

type BlockProps = {
  label: string;
  url?: string;
  icon?: React.ReactNode;
  count?: number;
  active?: boolean;
  onEdit?: (...args: any[]) => any;
  onClick?: (...args: any[]) => any;
  className?: string;
} & LinkProps &
  React.RefAttributes<HTMLAnchorElement> &
  React.DetailedHTMLProps<
    React.ButtonHTMLAttributes<HTMLButtonElement>,
    HTMLButtonElement
  >;

type ItemProps = {
  label?: string;
  description?: string;
  active?: boolean;
  className?: string;
} & React.DetailedHTMLProps<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
>;

type IconProp = {
  icon?: React.ComponentType<{ size?: number }>;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
};

type SubTitleProps = {
  iconProps?: IconProp[];
} & React.DetailedHTMLProps<
  React.HTMLAttributes<HTMLDivElement>,
  HTMLDivElement
>;

type SearchProps = {
  isCollapsed?: boolean;
  onCollapse?: React.MouseEventHandler<HTMLButtonElement>;
} & React.InputHTMLAttributes<HTMLInputElement>;

type AddNewProps = {
  label?: string;
  onClick?: React.MouseEventHandler<HTMLButtonElement>;
} & React.DetailedHTMLProps<
  React.HTMLAttributes<HTMLDivElement>,
  HTMLDivElement
>;

const MenuBar: React.FC<{
  title?: string;
  showMenu?: boolean;
  className?: string;
  children?: React.ReactNode | React.ReactNode[];
}> & {
  Block: React.FC<BlockProps>;
  Item: React.FC<ItemProps>;
  SubTitle: React.FC<SubTitleProps>;
  Search: React.FC<SearchProps>;
  AddNew: React.FC<AddNewProps>;
};

export default MenuBar;