import { Box, useTheme } from '@mui/material';
import { Icon } from '@iconify/react';
import shieldCheckIcon from '@iconify-icons/mdi/shield-check';

import DidConnectLogo from './did-connect-logo';
import { mergeSx } from '../Util/style';

export default function PoweredBy({ ...rest }) {
  const { palette } = useTheme();

  return (
    <Box
      {...rest}
      sx={mergeSx(
        {
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'text.secondary',
          gap: 0.5,
          fontSize: 12,
          fontFamily: 'Lexend',
          whiteSpace: 'nowrap',
        },
        rest?.sx
      )}>
      <Icon icon={shieldCheckIcon} color={palette.success.main} />
      Secured by
      <Box
        component="a"
        href="https://www.didconnect.io/"
        target="_blank"
        rel="noopener"
        sx={{
          color: 'initial',
          display: 'flex',
          alignItems: 'center',
          gap: 0.5,
          textDecoration: 'none',
          '&:hover': {
            textDecoration: 'underline',
          },
        }}>
        <DidConnectLogo />
      </Box>
    </Box>
  );
}
