import { CaretDownOutlined, CaretRightOutlined } from "@ant-design/icons";
import { Typography } from "antd";
import { type ReactNode, useState } from "react";

interface SidebarGroupProps {
  children: ReactNode;
  count: number;
  label: string;
}

export function SidebarGroup({ children, count, label }: SidebarGroupProps) {
  const [collapsed, setCollapsed] = useState(false);

  return (
    <div className="app-sidebar-group">
      <div className="app-sidebar-group-header" onClick={() => setCollapsed(!collapsed)}>
        <span className="app-sidebar-group-arrow">{collapsed ? <CaretRightOutlined /> : <CaretDownOutlined />}</span>
        <Typography.Text className="app-sidebar-group-label" type="secondary">
          {label}
        </Typography.Text>
        <Typography.Text className="app-sidebar-group-count" type="secondary">
          ({count})
        </Typography.Text>
      </div>
      {!collapsed && <div className="app-sidebar-group-content">{children}</div>}
    </div>
  );
}