import React, {Component} from 'react';
import {Col, Card, CardImg, CardBody, CardTitle} from 'reactstrap';
import WiaasBox from '../../mainComponents/box/WiaasBox.jsx';
import profileSvg from '../../svg/profile.svg';
import './style/ProfileShowContainer.css';

class ProfileShowContainer extends Component {
    render() {
        const {profileInfo, isLoading} = this.props;

        return (
            <div>
                <WiaasBox id="profile-show">
                    {
                        isLoading &&
                        <Col xl="12" className="loader">
                            <i className="fa fa-spinner fa-spin fa-3x" aria-hidden="true"></i>
                        </Col>
                    }
                    {
                        (profileInfo && !isLoading) &&
                        <Card id='profile-info-card'>
                            <CardImg top
                                className="profile-image"
                                src={profileSvg}
                                alt="My Profile" />
                            <CardBody className="text-center">
                                  <CardTitle>{profileInfo.name}</CardTitle>
                                  <div>
                                      <div>
                                          {profileInfo.companyName}
                                      </div>
                                      <div>
                                          {profileInfo.vatCode}
                                      </div>
                                      <div>
                                          <i className="fa fa-envelope" aria-hidden="true"></i>  {profileInfo.mail}
                                      </div>
                                      <div>
                                         <i className="fa fa-phone" aria-hidden="true"></i> {profileInfo.phone}
                                      </div>
                                 </div>
                            </CardBody>
                          </Card>
                    }
                </WiaasBox>
            </div>
        );
    }
}

export default ProfileShowContainer;