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="#q=${this.tag}"
			style="display: inline-block; margin: 3px; border: 1px solid black; background-color: #444; padding: 4px; border-radius: 3px"
			>${this.tag}${number}</a
		>`;
	}
}

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