import { ReactNode } from "react";
import Sidebar, { SidebarItem } from "./Sidebar";

export interface DashboardLayoutProps {
  title?: string;
  sidebarItems: SidebarItem[];
  activeHref?: string;
  onNavigate?: (href: string) => void;
  headerRight?: ReactNode;
  children: ReactNode;
}

const DashboardLayout = ({
  title,
  sidebarItems,
  activeHref,
  onNavigate,
  headerRight,
  children,
}: DashboardLayoutProps) => (
  <div className="flex min-h-screen bg-gray-50">
    <Sidebar
      title={title}
      items={sidebarItems}
      activeHref={activeHref}
      onNavigate={onNavigate}
    />
    <div className="flex flex-1 flex-col">
      <header className="flex items-center justify-between border-b border-gray-200 bg-white px-6 py-3">
        <div className="text-sm font-medium text-gray-700">{title}</div>
        <div>{headerRight}</div>
      </header>
      <main className="flex-1 overflow-auto p-6">{children}</main>
    </div>
  </div>
);

export default DashboardLayout;