"use client";

import { SortableCategoryList } from "./SortableCategoryList";

interface SidebarProps {
  open: boolean;
  onClose: () => void;
  activeCategory?: string | null;
  onSelectCategory?: (id: string) => void;
  activeAgent?: string | null;
  onSelectAgent?: (agentName: string) => void;
  activeSubcategory?: string | null;
  onSelectSubcategory?: (subcategoryId: string, parentCategoryId: string) => void;
}

export function Sidebar({
  open,
  onClose,
  activeCategory,
  onSelectCategory,
  activeAgent,
  onSelectAgent,
  activeSubcategory,
  onSelectSubcategory,
}: SidebarProps) {
  return (
    <>
      {/* Mobile backdrop */}
      {open && (
        <div
          className="fixed inset-0 z-40 bg-black/50 md:hidden"
          onClick={onClose}
        />
      )}

      {/* Sidebar panel */}
      <aside
        className={`fixed top-14 bottom-0 left-0 z-50 w-64 shrink-0 border-r border-zinc-200 bg-zinc-50 transition-transform duration-300 ease-in-out md:static md:translate-x-0 dark:border-zinc-800 dark:bg-zinc-900 ${
          open ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <nav className="flex h-full flex-col overflow-y-auto">
          <div className="px-4 pt-4 pb-2">
            <p className="text-xs font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500">
              Menu
            </p>
          </div>
          <SortableCategoryList
            activeCategory={activeCategory}
            onSelectCategory={onSelectCategory}
            activeAgent={activeAgent}
            onSelectAgent={onSelectAgent}
            activeSubcategory={activeSubcategory}
            onSelectSubcategory={onSelectSubcategory}
          />
        </nav>
      </aside>
    </>
  );
}
