import React from "react";
import { Icon } from "../icon/Icon";
/**
 * Primary UI component for user interaction
 */
export const AccordionTab = ({ children, id, label, className, accordionStyle, startOpen, dropdown, onClick, }) => {
    const [isOpen, setOpen] = React.useState(startOpen);
    const fileTreeIcon = accordionStyle == "file-tree"
        ? (React.createElement(Icon, { className: "file-icon", icon: isOpen ? "fas fa-folder-open" : "fas fa-folder", label: label }))
        : null;
    return (React.createElement("article", { className: `${accordionStyle || ""}` + " accordion " +
            `${className || ""}`, id: id },
        React.createElement("div", { className: `accordion-title ${isOpen ? "open" : ""}`, role: "switch", onClick: () => {
                onClick?.(!isOpen);
                setOpen(!isOpen);
            } }, fileTreeIcon || label),
        React.createElement("div", { className: `accordion-item ${!isOpen ? " collapsed" : ""} ${dropdown ? " dropdown-style" : ""}` }, isOpen && React.createElement("div", { className: "accordion-content" }, children))));
};
