import { Box, Button, Container, Link as LinkMui } from '@mui/material'
import { Link } 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'}
      >
        <LinkMui
          sx={{
            justifySelf: {
              xs: 'center',
              md: 'start'
            }
          }}
          component={Link}
          to={'/'}
          className={styles.logo}
        >
          <img src="/logo.svg" alt="Logo" />
        </LinkMui>
        <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}
        >
          <Button component={Link} to={'/'} variant={'text'}>
            Home
          </Button>
          <Button component={Link} to={'/#'} variant={'text'}>
            Documentation
          </Button>
          <Button component={Link} to={'/#'} variant={'text'}>
            Source
          </Button>
        </Box>
        <Box
          className={styles.links}
          sx={{
            justifySelf: {
              xs: 'center',
              md: 'end'
            }
          }}
        >
          <Button
            component={LinkMui}
            href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
            target="_blank"
            sx={{
              minWidth: '45px',
              padding: '10px'
            }}
            variant={'contained'}
          >
            <img
              src="https://image.nostr.build/fb557f1b6d58c7bbcdf4d1edb1b48090c76ff1d1384b9d1aae13d652e7a3cfe4.gif"
              width="25"
              alt="nostr logo"
              height="25"
            />
          </Button>
        </Box>
      </Box>
    </Container>
    <div className={`${styles.borderTop} ${styles.credits}`}>
      Built by&nbsp;
      <LinkMui href="https://nostrdev.com/" target="_blank">
        Nostr Dev
      </LinkMui>{' '}
      2024.
    </div>
  </footer>
)