import { ReactNode } from "react";

interface DashboardShellProps {
  sidebar: ReactNode;
  children: ReactNode;
}

export default function DashboardShell({ sidebar, children }: DashboardShellProps) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-[240px_1fr] gap-8 items-start">
      <aside className="bg-white border border-mist rounded-md p-5 lg:sticky lg:top-[96px]">
        {sidebar}
      </aside>
      <div>{children}</div>
    </div>
  );
}

// Used by landlord and admin sidebar navs
export function DashboardNavLink({
  icon,
  label,
  active,
  onClick,
}: {
  icon: ReactNode;
  label: string;
  active?: boolean;
  onClick?: () => void;
}) {
  return (
    <button
      onClick={onClick}
      className={`flex items-center gap-3 px-3 py-2.5 rounded-sm text-sm font-medium transition-colors w-full text-left ${
        active ? "bg-forest text-white" : "text-ink-soft hover:bg-sage hover:text-forest"
      }`}
    >
      <span className="w-[18px] h-[18px] shrink-0">{icon}</span>
      {label}
    </button>
  );
}