import React from "react";

export function Sidebar({ className = "", children, ...props }) {
  return <aside className={["o-sidebar", className].filter(Boolean).join(" ")} data-slot="sidebar" {...props}>{children}</aside>;
}
export function SidebarHeader({ className = "", children, ...props }) {
  return <div className={["o-sidebar__header", className].filter(Boolean).join(" ")} data-slot="sidebar-header" {...props}>{children}</div>;
}
export function SidebarContent({ className = "", children, ...props }) {
  return <div className={["o-sidebar__content o-scroll", className].filter(Boolean).join(" ")} data-slot="sidebar-content" {...props}>{children}</div>;
}
export function SidebarFooter({ className = "", children, ...props }) {
  return <div className={["o-sidebar__footer", className].filter(Boolean).join(" ")} data-slot="sidebar-footer" {...props}>{children}</div>;
}
export function SidebarGroup({ className = "", children, ...props }) {
  return <div className={["o-sidebar__group", className].filter(Boolean).join(" ")} data-slot="sidebar-group" {...props}>{children}</div>;
}
export function SidebarGroupLabel({ className = "", children, ...props }) {
  return <div className={["o-sidebar__group-label", className].filter(Boolean).join(" ")} data-slot="sidebar-group-label" {...props}>{children}</div>;
}
export function SidebarMenu({ className = "", children, ...props }) {
  return <ul className={["o-sidebar__menu", className].filter(Boolean).join(" ")} data-slot="sidebar-menu" {...props}>{children}</ul>;
}
export function SidebarMenuItem({ className = "", children, ...props }) {
  return <li className={["o-sidebar__item", className].filter(Boolean).join(" ")} data-slot="sidebar-menu-item" {...props}>{children}</li>;
}
export function SidebarMenuButton({ isActive = false, size = "default", className = "", children, ...props }) {
  const cls = ["o-sidebar__button", size !== "default" ? "o-sidebar__button--" + size : "", className].filter(Boolean).join(" ");
  return <button type="button" className={cls} data-slot="sidebar-menu-button" data-active={isActive} data-size={size} {...props}>{children}</button>;
}
export function SidebarMenuBadge({ className = "", children, ...props }) {
  return <div className={["o-sidebar__badge", className].filter(Boolean).join(" ")} data-slot="sidebar-menu-badge" {...props}>{children}</div>;
}
export function SidebarMenuSub({ className = "", children, ...props }) {
  return <ul className={["o-sidebar__sub", className].filter(Boolean).join(" ")} data-slot="sidebar-menu-sub" {...props}>{children}</ul>;
}
export function SidebarMenuSubButton({ isActive = false, className = "", children, ...props }) {
  return <a className={["o-sidebar__sub-button", className].filter(Boolean).join(" ")} data-slot="sidebar-menu-sub-button" data-active={isActive} {...props}>{children}</a>;
}
export function SidebarSeparator({ className = "" }) {
  return <div className={["o-sidebar__separator", className].filter(Boolean).join(" ")} data-slot="sidebar-separator" role="separator" />;
}
export function SidebarInset({ className = "", children, ...props }) {
  return <main className={["o-sidebar-inset", className].filter(Boolean).join(" ")} data-slot="sidebar-inset" {...props}>{children}</main>;
}
