import React, { ReactNode } from 'react';
import { HeaderProps } from './Header.js';
import 'components/Header/constants';
import 'neetoui';
import './MoreDropdown.js';
import '@bigbinary/neetoui';

type SettingItem = {
  label: string;
  description: string;
  path?: string;
  href?: string;
  children: ReactNode;
  icon: ReactNode;
  dataTestid?: string;
  isConnected?: boolean;
};
type SettingCategory = {
  id: string;
  label: string;
  isIntegration?: boolean;
  items: SettingItem[];
};
/**
 *
 * Settings can be used to create a settings page card layout.
 *
 * ![image](https://github.com/bigbinary/neeto-molecules/assets/66865722/16af3d07-e96a-4b4e-8013-ed6fa577c7b8|height=200|width=300)
 *
 * @example 
 *
 * categories={[
 *   {
 *     id: "general-settings",
 *     label: "General Settings",
 *     items: [
 *       {
 *         label: 'Ticket tags',
 *         description: 'Create and manage tags',
 *         icon: TicketIcon,
 *         path: '/settings/general/ticket_tags'
 *         dataTestid: 'Ticket tags' //dataTestid can be passed here.
 *         // other props will be passed on to the setting card.
 *       }
 *       ...
 *       ...
 *       //more items
 *     ]
 *   },
 *   {
 *     id: "integrations",
 *     isIntegration: true //Integrations section MUST have 'isIntegration: true',
 *     label: "Integrations",
 *     items: [
 *       {
 *         label: 'Github',
 *         description: 'Connect with github',
 *         icon: GithubIcon,
 *         path: routes.settings.integrations.github.index,
 *         isConnected: true,
 *         // other props will be spread on the Link element in the settings card.
 *       }
 *     ],
 *   },
 *   ...
 *   ...
 *   //more categories
 * ]}
 * @endexample
 * Note: This component also supports "scroll-into-view" functionality to scroll
 *
 * specific setting categories into view, based on the query params. For example,
 *
 * the page will scroll to the "Integrations" category, when the query params
 *
 * contain ?category=integrations. The query param should be the id of the
 *
 * category.
 *
 * @example 
 *
 * import { useState } from "react";
 * import Settings from "@bigbinary/neeto-molecules/Settings";
 * import { Modal as IntegrationModal } from "neetointegrations"
 * import { getCategories } from "./utils";
 * 
 * const SettingsPage = () => {
 *   const [isOpen, setIsOpen] = useState(false);
 * 
 *   return (
 *     <div>
 *       <Settings categories={getCategories()} />
 *       <IntegrationModal isOpen={isOpen}>
 *     </div>
 *   );
 * };
 * @endexample
*/
declare const Settings: React.FC<{
  title?: string;
  isTitleHidden?: boolean;
  isSearchHidden?: boolean;
  categories: SettingCategory[];
  className?: string;
  headerProps?: HeaderProps;
}>;

export { Settings as default };