import React from 'react';
import styled from 'styled-components';
import { uiColors } from '../../../constants/uiColors';
import { Button, ButtonTypes } from '../../Button';

export interface IPlayersRowProps {
  id: string;
  charName: string;
  charClass: string;
  charLevel: number;
  isNotInvited: boolean;
}

export const PlayersRow: React.FC<IPlayersRowProps> = ({
  charName,
  charClass,
  charLevel,
  isNotInvited,
}) => {
  return (
    <PartyWrapper>
      <TextContainer>{charName}</TextContainer>
      <TextContainer>{charClass}</TextContainer>
      <TextContainer>{charLevel}</TextContainer>
      {isNotInvited ? (
        <>
          <Button buttonType={ButtonTypes.RPGUIButton}>Invite</Button>
        </>
      ) : (
        <TextContainer>Invited</TextContainer>
      )}
    </PartyWrapper>
  );
};

const PartyWrapper = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: row;
  flex: auto;
`;

const TextContainer = styled.div`
  color: ${uiColors.white};
  flex: auto;
  margin: auto;
`;
