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

/**
 * Centered branded card that hosts each auth step (phone, OTP). One surface, top to bottom:
 * brand mark → the step's form → a divider → the platform's trust facts. The facts used to float
 * on the page *under* the card, which read as unrelated page furniture and left the card looking
 * cut off; login is the product's only front door, so the evidence belongs on the same surface as
 * the form it is vouching for. The desktop side-illustration is gone with it — the app now renders
 * inside a phone-width frame at every viewport, so it never had room to appear.
 * @component AuthCard
 */
const AuthCard: FunctionComponent<PropsWithChildren> = ({ children }) => (
  <Stack sx={{ alignItems: 'center', justifyContent: 'center', flexGrow: 1, px: 2, py: 3 }}>
    <Paper
      elevation={0}
      // Radius comes from the house token (MuiPaper). The old `borderRadius: 3` multiplied the
      // shape unit into a ~30px pill — exactly the "too round" this pass is undoing.
      sx={{ width: '100%', maxWidth: AUTH_CARD_MAX_WIDTH, px: { xs: 2.5, sm: 3 }, py: 3 }}
    >
      <Stack sx={{ gap: 2.5 }}>
        <BrandMark withTagline />
        {children}
        <Divider flexItem />
        <TrustBullets />
      </Stack>
    </Paper>
  </Stack>
);

export default AuthCard;
