import { Fragment } from 'react';
import Box from '@mui/joy/Box';
import IconButton from '@mui/joy/IconButton';
import Typography from '@mui/joy/Typography';
import BadgeRoundedIcon from '@mui/icons-material/BadgeRounded';
import { ColorSchemeToggle } from '@rakit/joy-ui';
import { SignInCard } from 'src/views/SignInCard';

export default function SignIn() {
  return (
    <Fragment>
      <Box
        sx={{
          display: 'flex',
          flexDirection: 'column',
          minHeight: '100dvh',
          width: '100%',
          px: 2,
          justifyContent: "space-between",
        }}
      >
        <Box
          component="header"
          sx={{
            py: 3,
            display: 'flex',
            justifyContent: 'space-between',
          }}
        >
          <Box sx={{ gap: 2, display: 'flex', alignItems: 'center' }}>
            <IconButton variant="soft" color="primary" size="sm">
              <BadgeRoundedIcon />
            </IconButton>
            <Typography level="title-lg">Company logo</Typography>
          </Box>
          <ColorSchemeToggle />
        </Box>
        <SignInCard />
        <Box component="footer" sx={{ py: 3 }}>
          <Typography level="body-xs" sx={{ textAlign: 'center' }}>
            © Your company {new Date().getFullYear()}
          </Typography>
        </Box>
      </Box>
    </Fragment>
  );
}