import {LitElement, html, unsafeHTML} from './lit-all.min.js';
import {styles} from './tf-styles.js';

class TfTagElement extends LitElement {
	static get properties() {
		return {
			tag: {type: String},
			count: {type: Number},
		};
	}

	static styles = styles;

	constructor() {
		super();
	}

	render() {
		let number = this.count ? html` (${this.count})` : undefined;
		return html`<a
			href=${'#' + encodeURIComponent(this.tag)}
			class="w3-tag w3-theme-d1 w3-round-4 w3-button"
			>${this.tag}${number}</a
		> `;
	}
}

customElements.define('tf-tag', TfTagElement);