import * as React from "react";
import { cn } from "@/lib/utils";

export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
  className?: string;
  children?: React.ReactNode;
}

const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
  ({ className, children, ...props }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "flex flex-col border-r bg-background transition-all duration-300",
          "min-w-[240px] w-60 h-screen",
          "dark:border-slate-700 dark:bg-slate-900",
          className
        )}
        {...props}
      >
        {children}
      </div>
    );
  }
);
Sidebar.displayName = "Sidebar";

const SidebarHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "flex h-16 items-center border-b bg-background px-6",
      "z-40",
      "shadow-sm",
      className
    )}
    {...props}
  />
));
SidebarHeader.displayName = "SidebarHeader";

const SidebarContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "flex-1 overflow-auto py-2",
      "scrollbar-thin scrollbar-track-transparent scrollbar-thumb-slate-200",
      "dark:scrollbar-thumb-slate-700",
      className
    )}
    {...props}
  />
));
SidebarContent.displayName = "SidebarContent";

export {
  Sidebar,
  SidebarHeader,
  SidebarContent,
};