import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2;

import React from 'react';
import styled from 'styled-components';
import { IconFacebook, IconTwitter, IconInstagram, IconYoutube } from '../../../Common/Icons';
export var SocialMediaIcon = (_ref) => {
  var {
    url,
    media
  } = _ref;

  var getIcon = () => {
    return /*#__PURE__*/React.createElement(SocialLogo, null, media === 'facebook' && /*#__PURE__*/React.createElement(IconFacebook, null), media === 'instagram' && /*#__PURE__*/React.createElement(IconInstagram, null), media === 'youtube' && /*#__PURE__*/React.createElement(IconYoutube, null), media === 'twitter' && /*#__PURE__*/React.createElement(IconTwitter, null));
  };

  return /*#__PURE__*/React.createElement(SocialMenuItem, {
    className: "px-2"
  }, url && /*#__PURE__*/React.createElement("a", {
    href: url,
    target: "_blank",
    rel: "noreferrer"
  }, getIcon()), !url && getIcon());
};
var SocialMenuItem = styled.li(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  line-height: 1.4;\n  display: inline-block;\n"])));
var SocialLogo = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  transition: color 0.15s ease;\n  width: 25px;\n  height: 25px;\n  color: ", ";\n\n  &:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.grey;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map