import { Head } from '@inertiajs/react';
import { useState } from 'react';
import StudentLayout from '@/Layouts/StudentLayout';
import Card from '@/Components/UI/Card';
import Badge from '@/Components/UI/Badge';
import StatTile from '@/Components/UI/StatTile';
interface ReferralRow {
id: number;
referred_name: string;
status: 'pending' | 'rewarded';
reward_amount: string | null;
created_at: string;
}
interface TransactionRow {
id: number;
amount: string;
description: string | null;
created_at: string;
}
export default function Referrals({
isEligible,
referralLink,
bonusAmount,
walletBalance,
referrals,
transactions,
}: {
isEligible: boolean;
referralCode: string | null;
referralLink: string | null;
bonusAmount: string;
walletBalance: string;
referrals: ReferralRow[];
transactions: TransactionRow[];
}) {
const [copied, setCopied] = useState(false);
const copyLink = async () => {
if (!referralLink) return;
await navigator.clipboard.writeText(referralLink);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
return (
Refer & Earn
Earn ${Number(bonusAmount).toLocaleString()} in your Referral Wallet for every person you refer who
enrols in a Programme.
{!isEligible ? (
Locked
Complete a Course to Unlock Referrals
Referral access is unlocked once you complete every lesson in at least one course. Keep
learning — your referral link will appear here as soon as you qualify.
) : (
<>
Your Referral Link
{referralLink}
{copied ? 'Copied!' : 'Copy Link'}
Share this link — when someone registers and enrols in a Programme, your wallet is
credited automatically.
People You've Referred
Name
Status
Reward
Date
{referrals.map((referral) => (
{referral.referred_name}
{referral.status}
{referral.reward_amount ? `$${Number(referral.reward_amount).toLocaleString()}` : '—'}
{referral.created_at}
))}
{referrals.length === 0 && (
You haven't referred anyone yet.
)}
Wallet Ledger
Description
Amount
Date
{transactions.map((transaction) => (
{transaction.description}
+${Number(transaction.amount).toLocaleString()}
{transaction.created_at}
))}
{transactions.length === 0 && (
No wallet activity yet.
)}
)}
);
}