import React from 'react';

import { makeStyles } from '@material-ui/core/styles';
import { Typography, Container, Link } from '@material-ui/core';
import {
  Email as EmailIcon,
  GitHub as GitHubIcon,
  Facebook as FacebookIcon,
} from '@material-ui/icons';
import Section from '@components/Section';

export const SECTION_ID = 'contact';

function Contact() {
  const classes = useStyles();

  const linkProps = {
    underline: 'hover',
    color: 'secondary',
  };

  return (
    <Section size="small" id={SECTION_ID}>
      <Container maxWidth="md" className={classes.container}>
        <div className={classes.urlContainer}>
          <Typography variant="h6">
            <EmailIcon fontSize="large" />
            <Link href="mailto:dawidwysokinski000@gmail.com" {...linkProps}>
              dawidwysokinski000@gmail.com
            </Link>
          </Typography>
          <Typography variant="h6">
            <GitHubIcon fontSize="large" />
            <Link href="https://github.com/Kichiyaki" {...linkProps}>
              Kichiyaki
            </Link>
          </Typography>
          <Typography variant="h6">
            <FacebookIcon fontSize="large" />
            <Link
              href="https://www.facebook.com/dawidwysokinski00"
              {...linkProps}
            >
              /dawidwysokinski00
            </Link>
          </Typography>
        </div>
      </Container>
    </Section>
  );
}

const useStyles = makeStyles(theme => {
  return {
    container: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
    },
    urlContainer: {
      '& > *:not(:last-child)': {
        marginBottom: theme.spacing(0.5),
      },
      '& > *': {
        display: 'flex',
        alignItems: 'center',
        wordBreak: 'break-all',
        '& > *:not(:last-child)': {
          marginRight: theme.spacing(1),
        },
      },
    },
  };
});

export default Contact;