'use client';
import { FunctionComponent, PropsWithChildren } from 'react';
import { Paper, Stack } from '@mui/material';
import { AUTH_CARD_MAX_WIDTH, AUTH_HERO_MAX_WIDTH } from './constants';
import BrandMark from './BrandMark';
import AuthIllustration from './AuthIllustration';
import TrustBullets from './TrustBullets';

/**
 * Centered branded hero that hosts each auth step (phone, OTP). The card stays readable at
 * 320px; a calm illustration joins beside it once the viewport has room to breathe (desktop),
 * with the platform's trust facts underneath — login is the product's only front door, so it
 * carries trust evidence rather than a bare form.
 * @component AuthCard
 */
const AuthCard: FunctionComponent<PropsWithChildren> = ({ children }) => (
  <Stack sx={{ alignItems: 'center', justifyContent: 'center', minHeight: '70vh', px: 2, py: 4 }}>
    <Stack
      direction={{ xs: 'column', md: 'row' }}
      sx={{
        width: '100%',
        maxWidth: AUTH_HERO_MAX_WIDTH,
        alignItems: 'center',
        justifyContent: 'center',
        gap: { xs: 0, md: 6 },
      }}
    >
      <AuthIllustration sx={{ display: { xs: 'none', md: 'flex' } }} />
      <Stack sx={{ width: '100%', maxWidth: AUTH_CARD_MAX_WIDTH, gap: 3, flexShrink: 0 }}>
        <Paper
          elevation={0}
          sx={{
            width: '100%',
            p: { xs: 3, sm: 4 },
            border: '1px solid',
            borderColor: 'divider',
            borderRadius: 3,
          }}
        >
          <Stack sx={{ gap: 3 }}>
            <BrandMark withTagline />
            {children}
          </Stack>
        </Paper>
        <TrustBullets />
      </Stack>
    </Stack>
  </Stack>
);

export default AuthCard;
