import React from "react";
import styled from "styled-components";
import colors from "@theme/colors";
import breakpoints from "@theme/breakpoints";
import FooterContent from "./FooterContent";

const StyledFooter = styled.footer`
  display: flex;
  flex-direction: column;
  background-color: ${colors.darkBlue};
`;

const CopyRight = styled.div`
  display: flex;
  flex-flow: row nowrap;
  color: ${colors.white};
  background-color: ${colors.black};
  text-align: center;
  justify-content: center;
  font-size: 0.75rem;
  padding: 1rem 0;

  p {
    padding: 0.5rem 1rem;
    margin: 0;
    font-size: 0.8rem;
  }

  a {
    display: block;
    text-decoration: underline;
    padding: 0.4rem 0;
    font-size: 0.8rem;

    &:hover {
      text-decoration: none;
    }
  }

  @media screen and (max-width: ${breakpoints.mobile}) {
    flex-flow: column nowrap;
  }
`;

const Footer: React.FC = () => (
  <StyledFooter>
    <FooterContent />
    <CopyRight>
      <p>&copy; Aalto-yliopiston Sähköinsinöörikilta ry</p>
      <a href="mailto:admin@sahkoinsinoorikilta.fi">webmaster: admin@sahkoinsinoorikilta.fi</a>
    </CopyRight>
  </StyledFooter>
);

export default Footer;
