text: // @flow
  import * as React from 'react';
  
  import {
    Alek,
    Alfreda,
    Ralf,
    StatusKnob,
    Tapio
  } from '../Icons';
  
  import './CardItem.css';
  
  
  type PropsT = {
    +card: object,
    +map_id?: string,
    +location?: string,
  	+status?: string,
    +type?: string,
    +queue_time?: number,
    +queue_level?: string,
  }
  
  const CardItem = (props: PropsT) => {
    const { card } = props;
    const green = `var(--green-light)`;
  
    const queingTime = `${card.queue_time / 60} mins`;
    const cardLocation = card.location.length >= 0 ? 'Unknown': card.location;
    const cardType = card.type === 'male' ? <Tapio /> : <Alek />;
    const cardStatus = queingTime >= 30 ? <StatusKnob statusColor="var(--pink)"/> : <StatusKnob statusColor="var(--green-light)" />;
  
  	return (
      <div>
        <header className="card__item__header">
          <p className="card__item__header--left">Location: { cardLocation }</p>
          <div className="card__item__header--right">{ cardType }</div>
        </header>
  
        <div className="card__item__content">
          <div className="card__item__content__status__time">{queingTime}</div>
          <div className="card__item__content__status">{cardStatus}</div>
        </div>
      </div>
  	);
  };
  
  CardItem.defaultProps = {
  	status: 'Unkown',
    location: 'Unknown',
    type: '',
    map_id: '',
    queue_level: '',
    queingTime: 0 || 'Unknow',
  };
  
  export default CardItem;