'use client';
import { FunctionComponent } from 'react';
import { Box, SxProps, Theme } from '@mui/material';
import AppIcon from '@/components/common/AppIcon';

const ILLUSTRATION_SIZE = 220;

interface AuthIllustrationProps {
  sx?: SxProps<Theme>;
}

/**
 * A calm, abstract hero graphic for the login front door — layered soft-tint circles (brand
 * tokens only, no stock photos or raster art) with a centered family glyph and a floating
 * trust badge, echoing the trust bullets underneath. Purely decorative.
 * @component AuthIllustration
 */
const AuthIllustration: FunctionComponent<AuthIllustrationProps> = ({ sx }) => (
  <Box
    aria-hidden="true"
    sx={{
      position: 'relative',
      width: ILLUSTRATION_SIZE,
      height: ILLUSTRATION_SIZE,
      flexShrink: 0,
      ...sx,
    }}
  >
    <Box sx={{ position: 'absolute', inset: 0, borderRadius: '50%', bgcolor: 'var(--bal-primary-soft)' }} />
    <Box
      sx={{
        position: 'absolute',
        insetInlineStart: '16%',
        insetBlockEnd: '4%',
        width: '46%',
        height: '46%',
        borderRadius: '50%',
        bgcolor: 'var(--bal-secondary-soft)',
      }}
    />
    <Box
      sx={{
        position: 'absolute',
        inset: 0,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Box
        sx={{
          width: '58%',
          height: '58%',
          borderRadius: '50%',
          bgcolor: 'var(--bal-bg-paper)',
          boxShadow: 'var(--bal-shadow-3)',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <AppIcon icon="family" size={64} color="var(--bal-primary)" />
      </Box>
    </Box>
    <Box
      sx={{
        position: 'absolute',
        insetInlineEnd: '8%',
        insetBlockStart: '10%',
        width: '30%',
        height: '30%',
        borderRadius: '50%',
        bgcolor: 'var(--bal-bg-paper)',
        boxShadow: 'var(--bal-shadow-2)',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <AppIcon icon="verified" size={30} color="var(--bal-trust)" />
    </Box>
  </Box>
);

export default AuthIllustration;