import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Link } from "gatsby";

import ProfilePic from "./profilepic";
import { rhythm } from "../utils/typography";

const GitHubLink = (props) => {
  if (!props.name) {
    return null;
  }

  return (
    <a className="no-underline" href={`https://github.com/${props.name}`}><FontAwesomeIcon icon={["fab", "github"]} /></a>
  );
};

const TwitterLink = (props) => {
  if (!props.name) {
    return null;
  }

  return (
    <a className="no-underline" href={`https://twitter.com/${props.name}`}><FontAwesomeIcon icon={["fab", "twitter"]} /></a>
  );
};

const LinkedinLink = (props) => {
  if (!props.name) {
    return null;
  }

  return (
    <a className="no-underline" href={`https://www.linkedin.com/in/${props.name}`}><FontAwesomeIcon icon={["fab", "linkedin"]} /></a>
  );
};

const Author = (props) => {
  const author = props.author;
  const identifier = props.identifier;
  const href = `/author/${identifier}`;

  return (
    <div
      style={{
        display: "flex",
        marginBottom: rhythm(2.5),
      }}
    >
      <ProfilePic identifier={identifier} name={author.name} />
      <p>
        Posted by <Link to={href}>{author.name}</Link>
        {author.summary &&
         <>– {author.summary}</>
        }
        {" "}
        <GitHubLink name={author.github} />
        {" "}
        <TwitterLink name={author.twitter} />
        {" "}
        <LinkedinLink name={author.linkedin} />
      </p>
    </div>
  );
};

export default Author;