import { Box, Button, Grid, Link } from '@mui/material'
import { Link as RouterLink } from 'react-router-dom'
import styles from './style.module.scss'

export const Footer = () => (
  <footer className={`${styles.borderTop} ${styles.footer}`}>
    <Grid
      container
      maxWidth="xl"
      sx={{ padding: '75px 0' }}
      columnSpacing={'50px'}
    >
      <Grid item xs={12} sm={2}>
        <Link component={RouterLink} to={'/'}>
          <Box className={styles.logo}>
            <img src="/logo.png" alt="Logo" />
          </Box>
        </Link>
      </Grid>
      <Grid item xs={12} sm={7} component={'nav'}>
        <div className={styles.nav}>
          <RouterLink to={'/'}>
            <Button variant={'text'} focusRipple={false}>
              Home
            </Button>
          </RouterLink>
          <RouterLink to={'/#'}>
            <Button variant={'text'} focusRipple={false}>
              Documentation
            </Button>
          </RouterLink>
          <RouterLink to={'/#'}>
            <Button variant={'text'} focusRipple={false}>
              Source
            </Button>
          </RouterLink>
        </div>
      </Grid>
      <Grid item xs={12} sm={3} className={styles.about}>
        <div className={styles.links}>
          <Link
            href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
            target="_blank"
          >
            <Button
              sx={{
                minWidth: '45px',
                padding: '10px'
              }}
              variant={'contained'}
            >
              <img
                src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
                width="25"
                alt="nostr logo"
                height="25"
              />
            </Button>
          </Link>
        </div>
      </Grid>
    </Grid>
    <div className={`${styles.borderTop} ${styles.credits}`}>
      Built by&nbsp;
      <Link href="https://nostrdev.com/" target="_blank">
        Nostr Dev
      </Link>{' '}
      2024.
    </div>
  </footer>
)
