import type { ComponentType, ReactNode } from "react";
import { shellLayoutClasses } from "./layout";

export type ShellSidebarNavItem = {
  labelKey: string;
  labelFallback: string;
  to: string;
  icon: ComponentType<{ size?: number | string }>;
  isExternal?: boolean;
  end?: boolean;
  isActive?: boolean;
};

type ShellSidebarProps = {
  brandLabel: string;
  brandTitle: string;
  brandIcon: ReactNode;
  navContent: ReactNode;
  footerContent: ReactNode;
};

export function AppSidebar({
  brandLabel,
  brandTitle,
  brandIcon,
  navContent,
  footerContent,
}: ShellSidebarProps) {
  return (
    <aside className={shellLayoutClasses.aside}>
      <div>
        <div className={shellLayoutClasses.brandSection}>
          <div className={shellLayoutClasses.brandWrap}>
            <div className={shellLayoutClasses.brandIcon}>{brandIcon}</div>
            <div>
              <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">
                {brandLabel}
              </p>
              <h1 className="text-lg font-semibold">{brandTitle}</h1>
            </div>
          </div>
        </div>
        <nav className={shellLayoutClasses.navWrap}>{navContent}</nav>
      </div>

      <div>{footerContent}</div>
    </aside>
  );
}