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

/**
 * Chrome-free shell for a focused, can't-tab-away flow — today only first-run onboarding
 * (ui-phase-3 §3.5). No bottom nav, no bell, no sidebar: a slim logo strip and the step content,
 * in the same spirit as `AuthCard`/`PublicLayout`. `RoleGuard` still gates the route group above
 * this — a chrome-free shell is a UX choice, not a security boundary.
 * @layout FocusedLayout
 */
const FocusedLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
  const tChrome = useTranslations('routeChrome');

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

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

export default FocusedLayout;
