import * as React from "react";

import { Sprite, SpriteType } from "../Sprite";
import { SocialPlatform } from "../Share";

import { openLink } from "../../utilities/dom";

interface ISocial {
  platform: SocialPlatform;
  link: string;
}

export interface ISocialsProps {
  socials: ISocial[];
}

export const Socials = ({ socials }: ISocialsProps) => (
  <div className="socials">
    {socials.map(({ platform, link }) => (
      <div
        key={platform}
        className="socials__social"
        onClick={() => openLink(link, true)}
      >
        <Sprite type={(() => {
          switch (platform) {
            case SocialPlatform.LinkedIn:
              return SpriteType.LinkedIn;
            case SocialPlatform.Instagram:
              return SpriteType.Instagram;
            case SocialPlatform.Twitter:
              return SpriteType.Twitter;
            case SocialPlatform.Facebook:
            default:
              return SpriteType.Facebook
          }
        })()} />
      </div>
    ))}
  </div>
);