no-copy-frontend/src/app/ui/referral-page/referral-link-section.tsx

'use client'

import { fetchReferralUserStats } from '@/app/actions/referralsActions';
import { useQuery } from '@tanstack/react-query';
import { useTranslations } from 'next-intl';
import { useEffect, useRef, useState } from 'react';
import { toast } from 'sonner';

export default function ReferralLinkSection() {
	const {
		data: referralUserStats,
		isLoading,
		isError,
		error
	} = useQuery({
		queryKey: ['referralUserStats'],
		queryFn: () => {
			return fetchReferralUserStats();
		},
		select: (data) => {
			return data;
		}
	});

	const t = useTranslations('Global')
	const [referralUrl, setReferralUrl] = useState<string>('');
	const refLink = useRef<HTMLElement>(null);

	useEffect(() => {
		if (typeof window !== 'undefined') {
			setReferralUrl(`${window.location.origin}/register?ref=${referralUserStats?.referralLink}`);
		}
	}, [referralUserStats]);

	const copyHandler = () => {
		if (refLink.current?.textContent) {
			navigator.clipboard.writeText(refLink.current?.textContent);
			toast.success(`${t('copied')}: ${refLink.current?.textContent}`)
		}
	};

	if (!referralUserStats?.referralLink) {
		return null;
	}

	return (
		<div className="referral-link-section">
			<h3>Ваша реферальная ссылка</h3>
			<p>Поделитесь этой ссылкой с друзьями и получайте комиссию с каждой их покупки</p>
			<div className="referral-link-input">
				<span
					id="referral-link"
					ref={refLink}
				>
					{referralUrl}
				</span >
				<button
					className="copy-btn"
					onClick={copyHandler}
				>
					Копировать
				</button>
			</div>
			<p className="referral-link-footer">
				Код: <strong>{referralUserStats?.referralLink}</strong> •
				Приглашений: <strong>
					{referralUserStats?.totalInvitee}
				</strong>
			</p>
		</div>
	)
}