text: import React from "react";
  import PropTypes from "prop-types";
  import {
    FacebookShareButton,
    TwitterShareButton,
    FacebookShareCount,
    FacebookIcon,
    TwitterIcon,
  } from "react-share";
  
  import config from "../../../content/meta/config";
  
  const PostShare = (props) => {
    const {
      post: {
        fields: { slug },
        frontmatter: { title },
        excerpt,
      },
      theme,
    } = props;
  
    const url = config.siteUrl + config.pathPrefix + slug;
  
    const iconSize = 36;
    const filter = (count) => (count > 0 ? count : "");
  
    return (
      <React.Fragment>
        <div className="share">
          <span className="label">SHARE</span>
          <div className="links">
            <TwitterShareButton url={url} title={title}>
              <TwitterIcon round size={iconSize} />
            </TwitterShareButton>
            <FacebookShareButton url={url} quote={`${title} - ${excerpt}`}>
              <FacebookIcon round size={iconSize} />
              <FacebookShareCount url={url}>
                {(count) => <div className="share-count">{filter(count)}</div>}
              </FacebookShareCount>
            </FacebookShareButton>
          </div>
        </div>
  
        {/* --- STYLES --- */}
        <style jsx>{`
          .share {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
          }
  
          .links {
            display: flex;
            flex-direction: row;
  
            :global(.SocialMediaShareButton) {
              margin: 0 0.8em;
              cursor: pointer;
            }
          }
  
          .label {
            font-size: 1.2em;
            margin: 0 1em 1em;
          }
  
          @from-width tablet {
            .share {
              flex-direction: row;
              margin: ${theme.space.inset.l};
            }
            .label {
              margin: ${theme.space.inline.m};
            }
          }
        `}</style>
      </React.Fragment>
    );
  };
  
  PostShare.propTypes = {
    post: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired,
  };
  
  export default PostShare;
  