import React from 'react'
import styled from 'styled-components'
import { Box, useTheme } from '@material-ui/core'
import FavoriteIcon from '@material-ui/icons/Favorite'
import TwitterIcon from '@material-ui/icons/Twitter'
import GitHubIcon from '@material-ui/icons/GitHub'
import coffee from './coffee.jpg'

export const Footer = () => {
  const theme = useTheme()

  return (
    <Container>
      <Text align="center">
        Made with <Heart color="secondary" /> by Sasha Drmic
      </Text>

      <CoffeeLink
        href="https://www.buymeacoffee.com/sashadrmic"
        target="_blank"
        rel="noopener noreferrer"
      >
        <CoffeeImage src={coffee} alt="Buy me a coffee" />
      </CoffeeLink>

      <Box display="flex" justifyContent="space-between" width={60} m="auto">
        <a
          href="https://twitter.com/sasha_drmic"
          target="_blank"
          rel="noopener noreferrer"
        >
          <Twitter theme={theme} />
        </a>
        <a
          href="https://github.com/sasa95/pomodor"
          target="_blank"
          rel="noopener noreferrer"
        >
          <GitHub theme={theme} />
        </a>
      </Box>
    </Container>
  )
}

const Container = styled.footer`
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 5px;
  padding-top: 20px;
`

const Text = styled.p`
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px 0;
  flex: 0 0 auto;
`

const Heart = styled(FavoriteIcon)`
  margin: 0 2px;
  position: relative;
  bottom: 4px;
`

const CoffeeLink = styled.a`
  width: 150px;
  margin: auto;
  margin-bottom: 5px;
`

const CoffeeImage = styled.img`
  width: 100%;
  border-radius: 5px;
`

const Twitter = styled(TwitterIcon)`
  fill: ${({ theme }) =>
    theme.palette.type === 'dark' ? '#a0a0a0' : '#757575'};
`

const GitHub = styled(GitHubIcon)`
  fill: ${({ theme }) =>
    theme.palette.type === 'dark' ? '#a0a0a0' : '#757575'};
`