import { UserAccountTypes } from '@rpg-engine/shared';
import React from 'react';
import styled from 'styled-components';

interface IPremiumLabelProps {
  accountType: UserAccountTypes;
}

const PremiumLabel: React.FC<IPremiumLabelProps> = ({ accountType }) => {
  if (accountType === UserAccountTypes.Free) return null;

  const getBackgroundColor = () => {
    switch (accountType) {
      case UserAccountTypes.PremiumBronze:
        return '#CD7F32';
      case UserAccountTypes.PremiumSilver:
        return '#C0C0C0';
      case UserAccountTypes.PremiumGold:
        return '#FFD700';
      case UserAccountTypes.PremiumUltimate:
        return '#002E99';
      default:
        return 'transparent';
    }
  };

  const getShortLabel = () => {
    switch (accountType) {
      case UserAccountTypes.PremiumBronze:
        return 'Bronze PA';
      case UserAccountTypes.PremiumSilver:
        return 'Silver PA';
      case UserAccountTypes.PremiumGold:
        return 'Gold PA';
      case UserAccountTypes.PremiumUltimate:
        return 'Ultimate PA';
      default:
        return '';
    }
  };

  return (
    <StyledLabel backgroundColor={getBackgroundColor()}>
      {getShortLabel()}
    </StyledLabel>
  );
};

const StyledLabel = styled.span<{ backgroundColor: string }>`
  background-color: ${({ backgroundColor }) => backgroundColor};
  color: ${({ backgroundColor }) =>
    backgroundColor === '#002E99' ? 'white' : 'black'};
  font-weight: bold;
  padding: 0 0.4rem;
  border-radius: 3px;
  margin-right: 3px;
  margin-bottom: 2px;
  display: inline-block;
  font-size: 0.5rem !important;
`;

export default PremiumLabel;
