import React from "react";
import FacebookIcon from "@material-ui/icons/Facebook";
import TwitterIcon from "@material-ui/icons/Twitter";
import InstagramIcon from "@material-ui/icons/Instagram";
import IconButton from "@material-ui/core/IconButton";
import LanguageIcon from "@material-ui/icons/Language";
import { openInNewTab } from "../../Services.js";

export default function Social(props) {
  return (
    <div className="social-container">
      {props.facebook && (
        <IconButton
          onClick={() => openInNewTab(props.facebook)}
          color="secondary"
        >
          <FacebookIcon />
        </IconButton>
      )}
      {props.twitter && (
        <IconButton
          onClick={() => openInNewTab(props.twitter)}
          color="secondary"
        >
          <TwitterIcon />
        </IconButton>
      )}
      {props.instagram && (
        <IconButton
          onClick={() => openInNewTab(props.instagram)}
          color="secondary"
        >
          <InstagramIcon />
        </IconButton>
      )}
      {props.www && (
        <IconButton onClick={() => openInNewTab(props.www)} color="secondary">
          <LanguageIcon />
        </IconButton>
      )}
    </div>
  );
}