import {Fragment, FunctionComponent} from 'react';
import Image from 'next/image';

import {NextSeo} from 'next-seo';

import Header from '../components/header';
import Contacts from '../components/contacts';

interface Props {
  slogan: string;
  about: string;
}

const Index: FunctionComponent<Props> = props => {
  return (
    <Fragment>
      <NextSeo
        title="Rômulo Alves"
        description="Software Engineer working at CWI"
       />
      <Header showMenu={false} />
      <main>
        <h3>{props.slogan}</h3>
        <section>
          <div className="about" dangerouslySetInnerHTML={{__html: props.about}} />
          <div className="picture-container">
            <Image src="/picture.jpg"
              alt="Picture of myself"
              width={200}
              height={200}
              />
          </div>
        </section>
        <Contacts />
      </main>

      <style jsx>{`
        main {
          font-size: 16px;
          margin: 25px auto;
          max-width: 1024px;
        }
        h3 {
          font-weight: normal;
          text-align: center;
        }

        section {
          align-items: center;
          display: flex;
          justify-content: space-between;
          margin: 50px 0;
        }

        p {
          margin: 15px 0;
        }

        @media (max-width: 1024px) {
          main {
            margin: 25px 25px;
          }
        }

        @media (min-width: 740px) {
          .about {
            width: 70%;
          }
        }

        @media (max-width: 740px) {
          h3 {
            text-align: justify;
          }
          section {
            flex-direction: column-reverse;
          }
          .picture-container {
            margin: 0 0 25px;
          }
        }
      `}</style>
      <style jsx global>{`
        .picture-container img {
          border-radius: 50%;
        }
      `}</style>
    </Fragment>
  );
};

export function getStaticProps() {
  const data = require('../data/index').default;
  const about = data.about.links.reduce((value, link) => {
    return value.replace(new RegExp(link.expression, 'g'), 
      `<a href="${link.href}" title="${link.title || link.text}" target="_blank" rel="noopener">${link.text}</a>`);
  }, data.about.text);

  return {
    props: {
      ...data,
      about
    }
  };
}

export default Index;