<template>
	<div
		class="wcc-flex wcc-justify-end wcc-direction--column wcc-text-right"
		v-if="pageViewsEnabled"
	>
		<p class="wcc-text-sm wcc-text-secondary-dark">
			{{ $i18n.__("Current plan:", "webtoffee-cookie-consent") }}
			<b>{{ info.plan.name }}</b>
		</p>
		<p class="wcc-text-xs wcc-text-secondary-light">
			{{ pageViews.count }}/ {{ pageViews.limit }} ({{ pageviewsPercentage }}%) {{ $i18n.__('pageviews used', 'webtoffee-cookie-consent') }}
		</p>
		<p></p>
	</div>
</template>
<script>
export default {
	name: "Pageviews",
	props: {},
	methods: {},
	computed: {
		info() {
			return this.getInfo();
		},
		pageViews() {
			return this.info.pageviews;
		},
		pageviewsPercentage() {
			return this.pageViews
				? Math.round((this.pageViews.count * 100) / this.pageViews.limit)
				: 0;
		},
		pageViewsEnabled() {
			return !!this.info && !!this.info.pageviews
		}
	},
};
</script>
<style lang="scss">
</style>