import { ReactNode } from "react";
import clsx from "clsx";

export interface SidebarItem {
  label: string;
  href: string;
  icon?: ReactNode;
}

export interface SidebarProps {
  title?: string;
  items: SidebarItem[];
  activeHref?: string;
  onNavigate?: (href: string) => void;
}

const Sidebar = ({ title, items, activeHref, onNavigate }: SidebarProps) => (
  <aside className="flex w-60 flex-col gap-1 border-r border-gray-200 bg-white px-3 py-4">
    {title ? (
      <div className="px-2 pb-3 text-sm font-semibold text-gray-700">
        {title}
      </div>
    ) : null}
    <nav className="flex flex-col gap-0.5">
      {items.map((item) => (
        <a
          key={item.href}
          href={item.href}
          onClick={(event) => {
            if (onNavigate) {
              event.preventDefault();
              onNavigate(item.href);
            }
          }}
          className={clsx(
            "flex items-center gap-2 rounded-md px-2 py-2 text-sm transition-colors",
            activeHref === item.href
              ? "bg-blue-50 text-blue-700"
              : "text-gray-700 hover:bg-gray-100",
          )}
        >
          {item.icon ? (
            <span className="text-gray-500">{item.icon}</span>
          ) : null}
          <span>{item.label}</span>
        </a>
      ))}
    </nav>
  </aside>
);

export default Sidebar;
