'use client';
import { FunctionComponent } from 'react';
import { Stack, Typography } from '@mui/material';
import { AppLoading } from '@/components';
import BrandMark from './BrandMark';

interface AuthSplashProps {
  /** Already-translated status line (e.g. "Signing you in…"). */
  message?: string;
}

/**
 * Full-height branded loading splash shown while the role router resolves `/me` — prevents the
 * wrong actor shell from flashing before the destination is known.
 * @component AuthSplash
 */
const AuthSplash: FunctionComponent<AuthSplashProps> = ({ message }) => (
  <Stack sx={{ alignItems: 'center', justifyContent: 'center', minHeight: '70vh', gap: 2 }}>
    <BrandMark />
    <AppLoading />
    {message && (
      <Typography variant="body2" sx={{ color: 'text.secondary' }}>
        {message}
      </Typography>
    )}
  </Stack>
);

export default AuthSplash;
