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

export interface AuthenticationCardProps extends PropsWithChildren {
  maxWidth?: string;
  sx?: SxProps<Theme>;
}

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

        ...sx,
      }}
    >
      {children}
    </Paper>
  );
};
