import { Box, Button, Link as LinkMui } from '@mui/material'
import { Link } from 'react-router-dom'
import styles from './style.module.scss'
import { Container } from '../Container'
import nostrImage from '../../assets/images/nostr.gif'
import { appPublicRoutes } from '../../routes'

export const Footer = () => (
  <footer className={`${styles.borderTop} ${styles.footer}`}>
    <Container
      style={{
        paddingBlock: '50px'
      }}
    >
      <Box
        display={'grid'}
        sx={{
          gridTemplateColumns: {
            xs: '1fr',
            md: '0.5fr 2fr 0.5fr'
          },
          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
            sx={{
              justifyContent: 'center'
            }}
            component={Link}
            to={'/'}
            variant={'text'}
          >
            Home
          </Button>
          <Button
            sx={{
              justifyContent: 'center'
            }}
            component={LinkMui}
            href={appPublicRoutes.docs}
            target="_blank"
            variant={'text'}
          >
            Documentation
          </Button>
          <Button
            sx={{
              justifyContent: 'center'
            }}
            component={LinkMui}
            href={appPublicRoutes.source}
            target="_blank"
            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={nostrImage} width="25" alt="nostr logo" height="25" />
          </Button>
        </Box>
      </Box>
    </Container>
    <div className={`${styles.borderTop} ${styles.credits}`}>
      Built by&nbsp;
      <a href="https://nostrdev.com/" target="_blank">
        Nostr Dev
      </a>{' '}
      2024.
    </div>
  </footer>
)
