type SectionData = {
  id: string;
};
type ItemData = {
  id: string;
};
type SectionArgs = {
  section: SectionData;
  index: number;
};
type ItemArgs = {
  Item: ItemData;
  section: SectionData;
  index: number;
};
/**
 *
 * The BoardView component renders a Kanban board with draggable sections and
 *
 * cards. It supports bi-directional auto-scrolling and lazy loading for improved
 *
 * performance.
 *
 * The main container component for the Kanban board, which wraps all sections.
 *
 * A component used within the BoardView to render individual sections.
 *
 * @example 
 *
 * import BoardView from "neetomolecules/BoardView";
 * 
 * // custom Item component
 * const Item = ({ item }) => (
 *   <div className=" neeto-ui-bg-white neeto-ui-rounded-sm flex min-h-10 items-center justify-center">
 *     <h5>Item {item.name}</h5>
 *   </div>
 * );
 * 
 * // custom Section component.
 * const Section = ({ section }) => (
 *   <div className="neeto-ui-bg-gray-300 neeto-ui-rounded-sm p-4">
 *     <h4 className="text-center">Section {section.name}</h4>
 *     <BoardView.Section
 *       {...{ section }}
 *       items={section.items}
 *       renderItem={({ item }) => <Item {...{ item }} />}
 *     />
 *   </div>
 * );
 * 
 * const Main = () => {
 *   const [sections, setSections] = useState([
 *     {
 *       id: "s1",
 *       name: "S1",
 *       items: [
 *         { id: "s1t1", name: "S1T1" },
 *         { id: "s1t2", name: "S1T2" },
 *         { id: "s1t3", name: "S1T3" },
 *       ],
 *     },
 *     {
 *       id: "s2",
 *       name: "S2",
 *       items: [
 *         { id: "s2t1", name: "S2T1" },
 *         { id: "s2t2", name: "S2T2" },
 *         { id: "s2t3", name: "S2T3" },
 *       ],
 *     },
 *     {
 *       id: "s3",
 *       name: "S3",
 *       items: [
 *         { id: "s3t1", name: "S3T1" },
 *         { id: "s3t2", name: "S3T2" },
 *         { id: "s3t3", name: "S3T3" },
 *       ],
 *     },
 *   ]);
 * 
 *   const onMoveSection = (source, destination) => {
 *     setSections(([...sections]) => {
 *       // destination index may change after removal of source section from list.
 *       const destinationIndex =
 *         source.index >= destination.index
 *           ? destination.index
 *           : destination.index - 1;
 * 
 *       const [section] = sections.splice(source.index, 1);
 *       sections.splice(destinationIndex, 0, section);
 * 
 *       return sections;
 *     });
 *   };
 * 
 *   const onMoveItem = (source, destination) => {
 *     setSections(([...sections]) => {
 *       // destination index may change after removal of item if same section.
 *       const destinationIndex =
 *         source.section.id === destination.section.id &&
 *         source.index >= destination.index
 *           ? destination.index - 1
 *           : destination.index;
 * 
 *       sections.forEach(section => {
 *         if (section.id === source.section.id) {
 *           section.items.splice(source.index, 1);
 *         }
 * 
 *         if (section.id === destination.section.id) {
 *           section.items.splice(destinationIndex, 0, source.item);
 *         }
 *       });
 * 
 *       return sections;
 *     });
 *   };
 * 
 *   return (
 *     <BoardView
 *       {...{ onMoveItem, onMoveSection, sections }}
 *       renderItemOverlay={({ item }) => <Item {...{ item }} />}
 *       renderSection={({ section }) => <Section {...{ section }} />}
 *       renderSectionOverlay={({ section }) => <Section {...{ section }} />}
 *     />
 *   );
 * };
 * @endexample
*/
declare const BoardView: React.FC<{
  ref?: React.Ref<HTMLDivElement>;
  sections: SectionData[];
  renderSection: (args: SectionArgs) => React.ReactNode;
  renderSectionOverlay: (args: SectionArgs) => React.ReactNode;
  renderItemOverlay: (args: ItemArgs) => React.ReactNode;
  onMoveSection?: (source: SectionArgs, destination: SectionArgs) => void;
  onMoveItem?: (source: ItemArgs, destination: ItemArgs) => void;
  className?: string;
  isDragAndDropDisabled?: boolean;
}> & {
  Section: React.FC<{
    ref?: React.Ref<HTMLDivElement>;
    section: SectionData;
    items: ItemData[];
    renderItem: (args: ItemArgs) => React.ReactNode;
    isDragAndDropDisabled?: boolean;
  }>;
};

export { BoardView as default };