import Link from "next/link";
import { publicLogoutAction } from "@/lib/actions";
import type { AdminSession } from "@/lib/auth";

export function UserShell({ children, session }: { children: React.ReactNode; session: AdminSession }) {
  return (
    <main className="user-panel-layout">
      <aside className="user-panel-sidebar">
        <Link className="logo" href="/">
          <span className="logo-icon">J</span>
          <span className="logo-text">
            <h1>JUST CHILL NEPAL</h1>
            <p>User Panel</p>
          </span>
        </Link>
        <nav className="user-panel-nav">
          <Link href="/dashboard">Overview</Link>
          <Link href="/dashboard/profile">My Profile</Link>
          <Link href="/dashboard/posts/new">Submit Blog</Link>
          <Link href="/dashboard/videos/new">Submit Video</Link>
          <Link href="/dashboard/gallery/new">Upload Gallery</Link>
          <Link href="/">Open Website</Link>
        </nav>
      </aside>
      <section className="user-panel-main">
        <header className="user-panel-topbar">
          <div>
            <strong>{session.name}</strong>
            <span>{session.isApproved ? "Approved uploader" : "Waiting for approval"}</span>
          </div>
          <form action={publicLogoutAction}>
            <button className="btn btn-secondary" type="submit">Logout</button>
          </form>
        </header>
        {children}
      </section>
    </main>
  );
}