'use client';
import styles from '@/components/friends/Friends.module.css';
import Image from 'next/image';
import { FC } from 'react';
import Friend from '@/components/friends/Friend';
import CopyLinkToast from '@/components/ui/copy-link-toast/CopyLinkToast';
import { usePlayerStore } from '@/store/player.state';

interface IFriends {
    isVisible: boolean;
    referral_fee: number | undefined;
    friendsAndReferralsCount: { friendsWord: string; referralWord: string };
    handleCopyInviteLink: () => Promise<void>;
    handleCloseToastLink: () => void;
}

const Friends: FC<IFriends> = ({
    isVisible,
    referral_fee,
    friendsAndReferralsCount,
    handleCopyInviteLink,
    handleCloseToastLink,
}) => {
    const { player } = usePlayerStore();
    const referrals = player?.attributes.my_referrals.data;

    return (
        <div className={styles.friends}>
            <div className={styles.friendsTitle}>
                <span>Друзья</span>
            </div>
            <div className={styles.content}>
                <div className={styles.inviteBlock}>
                    <div className={styles.rewardInvite}>
                        <span>{referral_fee || 0}</span>
                        <Image
                            src={'/icons/robucks-icon.svg'}
                            alt={'robucks icon'}
                            width={32}
                            height={32}
                        />
                    </div>
                    <div className={styles.inviteButtonBlock}>
                        <button onClick={handleCopyInviteLink}>Пригласи друга</button>
                    </div>
                    <div className={styles.infoInvite}>
                        <span>
                            Получай 10% от твоих друзей +5% от друзей реферала +2.5% от их рефералов
                        </span>
                    </div>
                </div>
                <div className={styles.friendsListBlock}>
                    <div className={styles.friendsListHeader}>
                        <span>{friendsAndReferralsCount.friendsWord}</span>
                        <span>{friendsAndReferralsCount.referralWord}</span>
                    </div>
                    <div className={styles.friendsList}>
                        {referrals?.map(referral => <Friend key={referral.id} player={referral} />)}
                    </div>
                </div>
                <CopyLinkToast isVisible={isVisible} handleCloseToastLink={handleCloseToastLink} />
            </div>
        </div>
    );
};

export default Friends;