import { MainCard } from '@/components/MainCard';
import { Box } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { PropsWithChildren } from 'react';

type AuthCardProps = PropsWithChildren;

function AuthCard({ children }: AuthCardProps) {
  const theme = useTheme();
  return (
    <MainCard
      sx={{
        maxWidth: { xs: 400, lg: 475 },
        margin: { xs: 2.5, md: 3 },
        '& > *': {
          flexGrow: 1,
          flexBasis: '50%'
        }
      }}
      content={false}
      border={false}
      boxShadow
      // @ts-ignore
      shadow={theme.customShadows.z1}
    >
      <Box sx={{ p: { xs: 2, sm: 3, md: 4, xl: 5 } }}>{children}</Box>
    </MainCard>
  );
}

export { AuthCard };
export type { AuthCardProps };