"use client";

import { ReactNode } from "react";
import { BrandingStyles } from "@school/ui";
import { HeaderUserMenu } from "@/components/app/HeaderUserMenu";
import { ImpersonationBanner } from "@/components/app/ImpersonationBanner";
import { useBranding } from "@/components/app/BrandingProvider";

export function SocialShell({
  children,
  hideTopHeader = false,
}: {
  children: ReactNode;
  hideTopHeader?: boolean;
}) {
  const branding = useBranding();

  return (
    <div className="relative flex h-[100dvh] flex-col overflow-hidden bg-white">
      <BrandingStyles branding={branding} />
      <ImpersonationBanner />
      {!hideTopHeader ? (
        <header
          className="hidden shrink-0 border-b border-white/10 text-white lg:block"
          style={{ background: "var(--header-gradient)" }}
        >
          <div className="flex items-center justify-between px-4 py-2.5">
            <div>
              <div className="text-sm font-bold">شبکه اجتماعی</div>
              <div className="text-[11px] text-white/80">{branding.name}</div>
            </div>
            <div className="flex items-center gap-2">
              <a
                href="/dashboard"
                className="rounded-lg bg-white/15 px-2.5 py-1.5 text-xs font-medium hover:bg-white/25"
              >
                داشبورد
              </a>
              <HeaderUserMenu />
            </div>
          </div>
        </header>
      ) : null}
      {children}
    </div>
  );
}