src/client/components/layout/Layout.tsx

//
// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
// SPDX-License-Identifier: Apache-2.0
//

import { Header } from "./Header";
import { Footer } from "./Footer";
import { useAnalysisContext } from "../../contexts/AnalysisContext";
import { useTranslationContext } from "../../contexts/TranslationContext";
import type { ReactNode, CSSProperties } from "react";

interface LayoutProps {
  children: ReactNode;
}

const layoutStyle: CSSProperties = {
  height: "100%",
  display: "flex",
  flexDirection: "column",
  overflow: "hidden",
  transition: "filter var(--transition-base), transform var(--transition-base)",
};

const layoutBlurredStyle: CSSProperties = {
  height: "100%",
  display: "flex",
  flexDirection: "column",
  overflow: "hidden",
  filter: "blur(20px) brightness(0.4) saturate(0.5)",
  transform: "scale(0.95)",
  pointerEvents: "none",
  transition: "filter var(--transition-base), transform var(--transition-base)",
};

const mainStyle: CSSProperties = {
  flex: 1,
  overflowY: "auto",
  overflowX: "hidden",
  scrollbarGutter: "stable",
};

const mainContentStyle: CSSProperties = {
  width: "100%",
  maxWidth: "var(--max-width-container)",
  margin: "0 auto",
  padding: "var(--spacing-xl) var(--spacing-md)",
  display: "flex",
  flexDirection: "column",
  minHeight: "100%",
};

export const Layout = ({ children }: LayoutProps): JSX.Element => {
  const { isBlurred: isAnalysisBlurred } = useAnalysisContext();
  const { isBlurred: isTranslationBlurred } = useTranslationContext();
  
  const isBlurred = isAnalysisBlurred || isTranslationBlurred;

  return (
    <div style={isBlurred ? layoutBlurredStyle : layoutStyle}>
      <Header />
      <main style={mainStyle}>
        <div style={mainContentStyle}>{children}</div>
      </main>
      <Footer />
    </div>
  );
};