import type { Metadata } from "next";
import Link from "next/link";
import Ado2Logo from "@/components/ado2-logo";
import AccountBadge from "@/components/account-badge";
import AuthGate from "@/components/auth-gate";
import NavLink from "@/components/nav-link";
import { FEATURES } from "@/lib/features";

export const metadata: Metadata = {
  title: "ADO2 무빙포스터",
  description: "포스터 한 장으로 세로 영상을 만듭니다",
};

export default function Ado2Layout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <aside className="sidebar">
        <div className="sidebar-logo">
          <Link href="/" style={{ color: "var(--color-text-white)", display: "inline-flex", alignItems: "baseline", gap: 8, textDecoration: "none" }}>
            <Ado2Logo height={20} />
            <span className="sidebar-product">MOVING POSTER</span>
          </Link>
        </div>
        <nav className="sidebar-menu">
          <NavLink href="/" icon="video">무빙포스터</NavLink>
          {FEATURES.styling && <NavLink href="/studio" icon="image">포스터 스타일링</NavLink>}
          {FEATURES.archive && <NavLink href="/archive" icon="folder">아카이브</NavLink>}
        </nav>
        <AccountBadge />
        <div className="sidebar-foot">무빙포스터 · 내부 빌드</div>
      </aside>
      <main className="main-content">
        <div style={{ maxWidth: 1080, margin: "0 auto" }}>
          <AuthGate>{children}</AuthGate>
        </div>
      </main>
    </>
  );
}