"use client";

import { useLocale } from "next-intl";
import { Sidebar } from "@/components/layout/sidebar";
import { Topbar } from "@/components/layout/topbar";
import { CafeThemeProvider } from "@/components/theme/cafe-theme-provider";

/**
 * POS route layout — wraps the terminal in the standard dashboard chrome
 * (collapsible sidebar + topbar) but keeps the main content area
 * overflow-hidden so PosScreen can manage its own internal scrolling.
 */
export default function PosLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const locale = useLocale();
  const isRtl = locale !== "en";

  const mainColumn = (
    <div className="flex min-h-0 min-w-0 flex-1 flex-col">
      <Topbar />
      <main className="min-h-0 flex-1 overflow-hidden bg-background p-3 md:p-4">
        {children}
      </main>
    </div>
  );

  return (
    <CafeThemeProvider>
      <div
        className="flex h-screen min-h-0 overflow-hidden bg-background"
        dir={isRtl ? "rtl" : "ltr"}
      >
        {isRtl ? (
          <>
            <Sidebar side="right" />
            {mainColumn}
          </>
        ) : (
          <>
            <Sidebar side="left" />
            {mainColumn}
          </>
        )}
      </div>
    </CafeThemeProvider>
  );
}
