import React, { FunctionComponent } from "react";
import socialMediaItems from "../data/social-media";
type Props = {};

export const SocialBar: FunctionComponent<Props> = () => {
  return (
    <div className="socialimages">
      <span>
        {socialMediaItems.map((socialButton) => {
          return (
            <a
              key={socialButton.service}
              className="socialimage"
              href={socialButton.url}
              data-icon-text={socialButton.text}
            >
              <img
                src={socialButton.grayIcon}
                alt={`${socialButton.service} black and gray overlay`}
              />
              <img src={socialButton.icon} alt={`${socialButton.service} color image`} />
            </a>
          );
        })}
      </span>
    </div>
  );
};
