import React from 'react';
import badges from 'configs/badges.json';
import { faTrophy, faStar } from '@fortawesome/free-solid-svg-icons';

const icons = { faTrophy, faStar };

import { Wrapper, Trophy } from './elements';

export default function Badge({
  className,
  value = 'none',
  onBadgeSelected,
  showEditBadge,
  color,
  icon,
}) {
  if (showEditBadge)
    return (
      <Wrapper className={className}>
        <select value={value} onBlur={() => {}} onChange={onBadgeSelected}>
          {Object.keys(badges).map(b => (
            <option key={b} value={b}>
              {b.toUpperCase().substring(0, 1) + b.substring(1)}
            </option>
          ))}
          <option key={'none'} value={'none'}>
            {'None'}
          </option>
        </select>
      </Wrapper>
    );

  if (value === 'none') {
    return false;
  }

  return (
    <Wrapper className={className}>
      <Trophy icon={icons[icon]} color={color} />
    </Wrapper>
  );
}
