import type { ReactNode } from "react";
import Link from "next/link";
import { Briefcase, Heart, LayoutDashboard, Settings } from "lucide-react";
import { LogoutButton } from "@/components/auth/logout-button";

const links = [
  { href: "/dashboard", label: "Overview", icon: LayoutDashboard },
  { href: "/dashboard#trips", label: "My trips", icon: Briefcase },
  { href: "/dashboard#saved", label: "Saved stays", icon: Heart },
  { href: "/dashboard#settings", label: "Settings", icon: Settings },
];

export default function DashboardLayout({ children }: { children: ReactNode }) {
  return (
    <div className="mx-auto grid min-h-[680px] max-w-7xl md:grid-cols-[230px_1fr]">
      <aside className="border-b border-border bg-white/50 px-5 py-6 md:border-b-0 md:border-r sm:px-8 md:px-5">
        <div className="mb-7 flex items-center gap-3"><span className="grid size-10 place-items-center rounded-full bg-cocoa font-bold text-white">AM</span><div><p className="text-sm font-bold">Alex Morgan</p><p className="text-xs text-muted-foreground">Guest</p></div></div>
        <nav className="grid grid-cols-2 gap-1 md:grid-cols-1" aria-label="Dashboard navigation">{links.map(({ href, label, icon: Icon }, index) => <Link key={label} href={href} className={`flex items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-semibold ${index === 0 ? "bg-ember-soft text-cocoa" : "text-muted-foreground hover:bg-muted hover:text-cocoa"}`}><Icon size={18} />{label}</Link>)}</nav>
        <div className="mt-6 border-t border-border pt-4"><LogoutButton /></div>
      </aside>
      <div className="min-w-0 px-5 py-10 sm:px-8 lg:px-12">{children}</div>
    </div>
  );
}