import { Footer } from "@/components/footer";
import { Navbar } from "@/components/navbar";
import { DocumentLanguageSync } from "@/components/document-language-sync";
import { getDirection, type Language } from "@/data/portfolio";

type SiteShellProps = {
  language: Language;
  children: React.ReactNode;
};

export function SiteShell({ language, children }: SiteShellProps) {
  const dir = getDirection(language);

  return (
    <div dir={dir} className={`relative overflow-hidden ${dir === "rtl" ? "text-right" : ""}`}>
      <DocumentLanguageSync language={language} dir={dir} />
      <Navbar language={language} />
      {children}
      <Footer language={language} />
    </div>
  );
}