import Link from "next/link";
import { type ReactNode } from "react";
import { NavAuth } from "./components/nav-auth";

const NAV_LINKS = [
  { href: "/tv", label: "TV" },
  { href: "/dashboard", label: "Dashboard" },
  { href: "/docs", label: "Docs" },
];

export default function MainLayout({ children }: { children: ReactNode }) {
  return (
    <div className="flex min-h-screen flex-col bg-zinc-950 text-zinc-100">
      <header className="sticky top-0 z-50 border-b border-zinc-800 bg-zinc-950/80 backdrop-blur">
        <nav className="mx-auto flex h-14 max-w-7xl items-center justify-between px-6">
          <Link
            href="/tv"
            className="text-sm font-semibold tracking-widest text-zinc-100 uppercase"
          >
            K-TV
          </Link>
          <div className="flex items-center gap-1">
            <ul className="flex items-center gap-1">
              {NAV_LINKS.map(({ href, label }) => (
                <li key={href}>
                  <Link
                    href={href}
                    className="rounded-md px-3 py-1.5 text-sm text-zinc-400 transition-colors hover:bg-zinc-800 hover:text-zinc-100"
                  >
                    {label}
                  </Link>
                </li>
              ))}
            </ul>
            <div className="ml-2 border-l border-zinc-800 pl-2">
              <NavAuth />
            </div>
          </div>
        </nav>
      </header>
      <main className="flex flex-1 flex-col">{children}</main>
    </div>
  );
}