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

@Component({
  tag: 'scu-vertical-navigation-item',
  styleUrl: 'scu-vertical-navigation-item.scss',
  shadow: true
})

export class SCUVerticalNavigationItem {

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

  @Prop({ reflect: true }) selected: boolean = false;

  render() {

    return (
      <div class={`
          comp-scu-nav-item-v
          ${this.selected ? 'selected' : ''}
        `}>
        <div class="label">
         {this.label}
        </div>
        <div class="line-top"></div>
        <div class="line-bottom"></div>
        <div class="selected"> </div>
      </div>
    );
  } 
}