"use client";

import Link from "next/link";
import { useTranslation } from "react-i18next";

import { AdminLanguageSwitcher } from "@/components/admin/admin-language-switcher";
import { cn } from "@/lib/utils";

type DocsShellProps = {
  children: React.ReactNode;
  className?: string;
};

export function DocsShell({ children, className }: DocsShellProps): React.ReactElement {
  const { t } = useTranslation("integrationDocs");

  return (
    <div className={cn("min-h-dvh bg-background text-foreground", className)}>
      <header className="sticky top-0 z-40 border-b border-border/80 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
        <div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8">
          <Link href="/docs/integration" className="truncate text-sm font-semibold tracking-tight">
            {t("shell.title")}
          </Link>
          <div className="flex items-center gap-2">
            <AdminLanguageSwitcher />
            <Link
              href="/admin/login"
              className="text-xs text-muted-foreground transition-colors hover:text-foreground"
            >
              {t("shell.admin")}
            </Link>
          </div>
        </div>
      </header>
      {children}
    </div>
  );
}

export function DocsBody({
  sidebar,
  children,
}: {
  sidebar?: React.ReactNode;
  children: React.ReactNode;
}): React.ReactElement {
  return (
    <div className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-4 py-6 sm:px-6 lg:flex-row lg:gap-8 lg:px-8 lg:py-8">
      {sidebar}
      <main className="min-w-0 flex-1 pb-12">{children}</main>
    </div>
  );
}
