<template>
	<n-card v-if="referralLink" class="referral-card">
		<template #header>
			<div>
				<h3 class="text-lg font-semibold">{{ $t('Referral Program') }}</h3>
				<p class="text-sm text-gray-600 mt-1">{{ $t('Your exclusive referral link') }}</p>
			</div>
		</template>
		<n-space vertical :size="16">
			<ClickToCopyField :textContent="referralLink" />
			<p class="text-sm text-gray-700">
				{{ $t('Invite others to join Jingrow,') }}
				<strong>{{ $t('when they register and spend at least ¥100, you will get ¥20') }}</strong>
			</p>
		</n-space>
	</n-card>
</template>
<script>
import { NCard, NSpace } from 'naive-ui';
import ClickToCopyField from '../../ClickToCopyField.vue';

export default {
	name: 'AccountReferral',
	components: {
		NCard,
		NSpace,
		ClickToCopyField
	},
	computed: {
		referralLink() {
			if (this.$team.pg?.referrer_id) {
				return `${location.origin}/dashboard/signup?referrer=${this.$team.pg?.referrer_id}`;
			}
			return '';
		}
	}
};
</script>

<style scoped>
.referral-card {
	border-radius: 12px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease;
}

.referral-card:hover {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

@media (max-width: 768px) {
	.referral-card {
		border-radius: 8px;
	}
}
</style>