import { Paper } from '@mui/material';
import { type PropsWithChildren } from 'react';

// Beacuse in the otp verify there is a element outside of the authentication card
export const AuthenticationCard = ({ children }: PropsWithChildren) => {
  return (
    <Paper
      elevation={0}
      sx={{
        borderRadius: 4,
        p: {
          xs: 4,
          md: 6,
        },
        marginInline: 2,
        width: (t) => `calc(100% - ${t.spacing(2)})`,
        maxWidth: '552px',
      }}
    >
      {children}
    </Paper>
  );
};