import { Component, Prop, h } from '@stencil/core';

@Component({
  tag: 'scu-member-profile',
  styleUrl: 'scu-member-profile.scss',
  shadow: true
})

export class SCUVerticalNavigationItem {

  @Prop({ reflect: true }) name: string = "!No Label Sent!";
  @Prop({ reflect: true }) subtitle: string = "!No Label Sent!";
  @Prop({ reflect: true }) profile_pic: string = "";

  

  render() {
    return (
      <div class="comp-scu-member-profile">
        <div class="member-picture"
          style={{backgroundImage: `url('${this.profile_pic}')`}}>
        </div>
        <div class="label-box">
          <div class="member-name">
            {this.name}
          </div>
          <div class="member-since">
            {this.subtitle}
          </div>
        </div>
      </div>
    );
  } 
}