'use client';
import { FunctionComponent, PropsWithChildren } from 'react';
import { useTranslations } from 'next-intl';
import { Stack } from '@mui/material';
import { AppIcon, ErrorBoundary } from '@/components';
import LocaleSwitcher from '@/components/common/LocaleSwitcher';
import { DarkModeToggleButton } from './components/DarkModeButton';

/**
 * Unauthenticated shell — a minimal centered brand frame (logo + locale switcher + dark toggle,
 * no sidebar, no bottom bar). The step content (`AuthCard`, which renders its own larger `BrandMark`)
 * is the visual focus; this chrome stays a slim corner strip so the two marks don't compete.
 * @layout PublicLayout
 */
const PublicLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
  const tChrome = useTranslations('routeChrome');

  return (
    <Stack sx={{ minHeight: '100vh' }}>
      <Stack
        component="header"
        direction="row"
        sx={{ alignItems: 'center', justifyContent: 'space-between', paddingInline: 2, paddingBlock: 1.5 }}
      >
        <AppIcon icon="logo" size={28} color="var(--bal-primary)" aria-hidden="true" />
        <Stack direction="row" sx={{ alignItems: 'center' }}>
          <LocaleSwitcher />
          <DarkModeToggleButton />
        </Stack>
      </Stack>

      <Stack component="main" sx={{ flexGrow: 1 }}>
        <ErrorBoundary
          name="Public"
          title={tChrome('error_title')}
          body={tChrome('error_body')}
          retryLabel={tChrome('error_retry')}
        >
          {children}
        </ErrorBoundary>
      </Stack>
    </Stack>
  );
};

export default PublicLayout;
