import React, { useState } from "react";
import cls from "classnames";
import { MenuItem } from "../MenuItem/MenuItem";
import { classes } from "../../NavigationDrawer.tokens";
import { StyledSection, SectionHeader, SectionDivider, SectionIcon, ArrowIcon, Label } from "./Section.styles";
export const Section = ({ items, label, withContentLeft, isOpen, className, hasDivider = false, ...rest })=>{
    const [isCollapsed, setIsCollapsed] = useState(false);
    const icon = /*#__PURE__*/ React.createElement(SectionIcon, null, /*#__PURE__*/ React.createElement(ArrowIcon, {
        className: cls(isCollapsed && classes.navigationDrawerArrowInverse),
        color: "inherit"
    }));
    return /*#__PURE__*/ React.createElement(StyledSection, {
        className: className,
        ...rest
    }, label ? /*#__PURE__*/ React.createElement(SectionHeader, {
        onClick: ()=>setIsCollapsed(!isCollapsed)
    }, withContentLeft && label && icon, isOpen && /*#__PURE__*/ React.createElement(Label, null, label), !withContentLeft && icon) : hasDivider && /*#__PURE__*/ React.createElement(SectionDivider, null), !isCollapsed && items.map((item, index)=>/*#__PURE__*/ React.createElement(MenuItem, {
            ...item,
            key: index,
            withContentLeft: withContentLeft,
            isOpen: isOpen
        })));
};
