<script>
import spotIcon from '@components/spotIcon';

export default {
	components: {
		spotIcon
	},
	props: {
		localTime: String,
		siteTime: String,
		offset: String,
		classes: String,
		icon: String,
		titleWrapperName: String
	},
	inject: ['lang'],
	computed: {
		title() {
			const bDifferentTimeZone = (this.localTime != this.siteTime);
			const sTime = 
				this.lang.get('time.user', this.siteTime.slice(-5))
				+ ((this.offset != '0')?' ('+this.lang.get('unit.day_short')+this.offset+')':'');

			return (this.titleWrapperName)?
				this.lang.get(this.titleWrapperName, bDifferentTimeZone?sTime:this.siteTime)
				:
				(bDifferentTimeZone?sTime:null);
		}
	}
}
</script>

<template>
	<spotIcon v-if="icon" :icon="icon" :title="title" :text="localTime" width="fixed" size="lg" />
	<span v-else :class="classes" :title="title">{{ localTime }}</span>
</template>
