// src/components/sidebar/SidebarGroup.jsx
import React from "react";
import { itemCls, iconCls } from "./sidebarStyles";
import SidebarSubItem from "./SidebarSubItem";

export default function SidebarGroup({
  groupKey,
  label,
  icon: Icon,
  isOpen,
  isActiveGroup,
  onToggle,
  items, // [{ label, path, icon }]
  isPathActive,
  navigate,
}) {
  const active = isActiveGroup || isOpen;

  return (
    <>
      <button onClick={() => onToggle(groupKey)} className={itemCls(active)}>
        <span className="flex gap-2 items-center">
          <Icon className={iconCls(active)} />
          {label}
        </span>
      </button>

      <ul
        className={`w-full mt-2 overflow-hidden transition-all duration-400 ease-out ${
          active ? "max-h-64 opacity-100 translate-y-0" : "max-h-0 opacity-0 -translate-y-2 pointer-events-none"
        }`}
      >
        {items.map((it) => (
          <li key={it.path} className="pr-5 py-1">
            <SidebarSubItem
              label={it.label}
              icon={it.icon}
              active={isPathActive(it.path)}
              onClick={() => navigate(it.path)}
            />
          </li>
        ))}
      </ul>
    </>
  );
}
