import Link from 'next/link';
import { Sparkle } from '@/components/Sparkle';
import { Sidebar } from '@/components/docs/Sidebar';

/** Shared chrome for every /docs page: top bar + left sidebar + content well. */
export default function DocsLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen">
      {/* top bar */}
      <header className="sticky top-0 z-20 border-b border-line bg-[var(--color-bg)]/90 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center gap-4 px-6 py-3.5">
          <Link href="/" className="flex items-center gap-2.5">
            <span className="flex h-8 w-8 items-center justify-center rounded-full border border-[rgba(124,255,168,0.5)] bg-bg text-mint">
              <Sparkle size={16} />
            </span>
            <span className="text-[14px] font-semibold tracking-tight">Hover</span>
            <span className="text-text-dim">/</span>
            <span className="text-[13px] text-text-mute">docs</span>
          </Link>
          <span className="flex-1" />
          <Link href="/" className="text-[13px] text-text-mute transition-colors hover:text-text">
            ← Home
          </Link>
          <a
            href="https://github.com/Hyperyond/Hover"
            className="text-[13px] text-text-mute transition-colors hover:text-text"
          >
            GitHub
          </a>
        </div>
      </header>

      <div className="mx-auto flex max-w-7xl gap-10 px-6 py-10">
        {/* sidebar */}
        <aside className="hidden w-56 shrink-0 lg:block">
          <div className="sticky top-24">
            <Sidebar />
          </div>
        </aside>
        {/* content */}
        <main className="min-w-0 max-w-3xl flex-1">{children}</main>
      </div>
    </div>
  );
}
