import Link from "next/link";
import type { ReactNode } from "react";

export function Shell({ children }: { children: ReactNode }) {
  return (
    <div className="min-h-screen bg-slate-950 text-slate-100">
      <header className="border-b border-white/10 bg-slate-950/90 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-5 py-4">
          <Link href="/" className="flex items-center gap-3">
            <div className="grid h-10 w-10 place-items-center rounded-2xl bg-blue-600 font-bold">KS</div>
            <div>
              <div className="font-semibold tracking-tight">Knowledge Station</div>
              <div className="text-xs text-slate-400">Clases a Markdown para LLM</div>
            </div>
          </Link>
          <nav className="flex items-center gap-2 text-sm text-slate-300">
            <Link className="rounded-lg px-3 py-2 hover:bg-white/10" href="/">Materias</Link>
            <Link className="rounded-lg px-3 py-2 hover:bg-white/10" href="/settings">Configuracion</Link>
          </nav>
        </div>
      </header>
      <main className="mx-auto max-w-7xl px-5 py-8">{children}</main>
    </div>
  );
}