import Header from '@blocklet/ui-react/lib/Header';
import { Avatar, Button, Stack, Typography } from '@mui/material';
import { Link } from 'react-router-dom';
import Typewriter from 'typewriter-effect';

import { useLocaleContext } from '@arcblock/ux/lib/Locale/context';

function Home() {
  const { t } = useLocaleContext();
  return (
    <div>
      <Header
        meta={undefined}
        addons={undefined}
        sessionManagerProps={undefined}
        homeLink={undefined}
        theme={undefined}
        hideNavMenu={undefined}
        maxWidth={false}
      />
      <Stack
        sx={{
          alignItems: 'center',
          justifyContent: 'center',
          height: '60vh',
          width: '100vw',
        }}>
        <Stack
          direction="column"
          spacing={3}
          sx={{
            maxWidth: 'sm',
            alignItems: 'center',
          }}>
          <Avatar
            src={window.blocklet.appLogo}
            sx={{ width: 80, height: 80 }}
            variant="square"
            alt={window.blocklet.appName || 'Payment Kit'}
          />
          <Stack
            direction="column"
            spacing={1}
            sx={{
              alignItems: 'center',
            }}>
            <Typography variant="h4">Payment Kit</Typography>
            <Typography
              variant="h5"
              sx={{
                color: 'text.secondary',
                fontWeight: 'normal',
              }}>
              <Typewriter
                options={{
                  strings: [t('common.homeTagline')],
                  autoStart: true,
                  loop: true,
                }}
              />
            </Typography>
          </Stack>
          <Stack direction="row" spacing={3}>
            <Button variant="outlined" color="secondary" size="large" component={Link} to="/integrations">
              {t('common.adminDashboard')}
            </Button>
            <Button
              variant="outlined"
              color="primary"
              size="large"
              component={Link}
              to="/customer"
              sx={{ background: 'transparent' }}>
              {t('common.customerPortal')}
            </Button>
          </Stack>
        </Stack>
      </Stack>
    </div>
  );
}

export default Home;
