import { Box, Button, Container, 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}`}>
    <Container
      maxWidth="xl"
      sx={{
        paddingY: '50px'
      }}
    >
      <Box
        display={'grid'}
        sx={{
          gridTemplateColumns: {
            xs: '1fr',
            md: '0.5fr 1.75fr 0.75fr'
          },
          alignItems: {
            xs: 'center',
            md: 'start'
          }
        }}
        gap={'50px'}
      >
        <Link
          sx={{
            justifySelf: {
              xs: 'center',
              md: 'start'
            }
          }}
          component={RouterLink}
          to={'/'}
          className={styles.logo}
        >
          <img src="/logo.svg" alt="Logo" />
        </Link>
        <Box
          display={'grid'}
          sx={{
            gap: '15px',
            gridTemplateColumns: {
              xs: '1fr',
              sm: 'repeat(2, 1fr)',
              xl: 'repeat(3, 1fr)'
            },
            borderBlock: {
              xs: 'solid 1px rgba(0, 0, 0, 0.1)',
              md: 'unset'
            },
            paddingY: {
              xs: '10px',
              md: 'unset'
            }
          }}
          component={'nav'}
          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>
        </Box>
        <Box
          className={styles.links}
          sx={{
            justifySelf: {
              xs: 'center',
              md: 'end'
            }
          }}
        >
          <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>
        </Box>
      </Box>
    </Container>
    <div className={`${styles.borderTop} ${styles.credits}`}>
      Built by&nbsp;
      <Link href="https://nostrdev.com/" target="_blank">
        Nostr Dev
      </Link>{' '}
      2024.
    </div>
  </footer>
)