<template>
	<div class="nm-button" :class="moreClass" :data-tooltip="tip" data-inverted>
		<!-- Display Icon and text  -->
		<i v-if="icon" :class="`${icon} icon`"></i>
		<span v-if="(text && mobile) || (text && showText)">{{text}}</span>

		<slot></slot>
	</div>
</template>

<script>
	/*
		Menu button
			Single Icon View
			Single Icon With small text on mobile
			Tooltips on desktop
				Tooltip above or below


	*/

	export default {
		name: 'NoteMenuButtonComponent',
		props: [ 'icon', 'text', 'tooltip', 'moreClass', 'showText', 'tip'],
		data () {
			return {
				files: [],
				mobile: false,
				showTooltip: false,
			}
		},
		beforeMount(){
			this.mobile = this.$store.getters.getIsUserOnMobile
		},
		mounted(){
			// console.log('Im a button')
		},
		methods: {
			onFileClick(file){

			},
		}
	}
</script>
