import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import * as React from 'react';
import { RunnerInformation } from 'util/datatypes/RunnerList';

import style from './Runner.module.scss';

export default function Runner({ runner }: { runner: RunnerInformation }) {
  return (
    <span className="mr-3 text-nowrap">
      <span className="mr-1">{runner.name}</span>
      <sup>
        {runner.platform === 'TWITCH' && runner.stream.length > 0 ? (
          <a href={runner.stream}>
            <FontAwesomeIcon icon={['fab', 'twitch']} className={['mr-1', style.twitch].join(' ')} />
          </a>
        ) : ''}
        {runner.platform === 'FACEBOOK' && runner.stream.length > 0 ? (
          <a href={runner.stream}>
            <FontAwesomeIcon icon={['fab', 'facebook']} className={['mr-1', style.facebook].join(' ')} />
          </a>
        ) : ''}
        {runner.platform === 'YOUTUBE' && runner.stream.length > 0 ? (
          <a href={runner.stream}>
            <FontAwesomeIcon icon={['fab', 'youtube']} className={['mr-1', style.youtube].join(' ')} />
          </a>
        ) : ''}
        {runner.twitter && runner.twitter.length > 0 ? (
          <a href={`https://twitter.com/${runner.twitter}`}>
            <FontAwesomeIcon icon={['fab', 'twitter']} className={['mr-1', style.twitter].join(' ')} />
          </a>
        ) : ''}
        {runner.youtube && runner.youtube.length > 0 ? (
          <a href={`https://youtube.com/${runner.youtube}`}>
            <FontAwesomeIcon icon={['fab', 'youtube']} className={['mr-1', style.youtube].join(' ')} />
          </a>
        ) : ''}
      </sup>
    </span>
  );
}