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

@Component({
  tag: 'hy-quote',
  styleUrl: 'hy-quote.scss',
  shadow: true,
})
export class HyQuote {
  @Prop() quoteSignature?: string;

  render() {
    return (
      <div class="hy-quote">
        <span class="hy-quote__icon-wrapper">
          <div class="hy-quote__icon">
            <hy-icon icon={'hy-icon-quote'} size={48} />
          </div>
        </span>
        <div class="hy-quote-text-wrapper">
          <div class="hy-quote__text">
            <slot></slot>
          </div>
          {this.quoteSignature && <div class="hy-quote__signature">{this.quoteSignature}</div>}
        </div>
      </div>
    );
  }
}