<script setup lang="ts">
import { PlayIcon } from '@modrinth/assets'

import { formatNumber } from '../../../../../utils'
import { useVIntl } from '../../../composables'
import { commonMessages } from '../../../utils'
import { StatItem } from '../../base'

const { formatMessage } = useVIntl()

defineProps<{
	recentPlays: number
	hideLabel?: boolean
}>()
</script>
<template>
	<StatItem
		v-tooltip="
			`${formatNumber(recentPlays, true)} recent play${recentPlays === 1 ? '' : 's'} from Modrinth in the past 2 weeks`
		"
		class="smart-clickable:allow-pointer-events w-max"
	>
		<PlayIcon />
		{{
			hideLabel
				? formatNumber(recentPlays, true)
				: formatMessage(commonMessages.projectRecentPlays, {
						count: formatNumber(recentPlays, true),
					})
		}}
	</StatItem>
</template>
