`src/components/ReferralWidget.tsx`

63 lines
"use client";

import { useEffect, useState } from "react";

export default function ReferralWidget({
  token, totalRefs, untilNext, rewardedRefs,
}: {
  token: string; totalRefs: number; untilNext: number; rewardedRefs: number;
}) {
  const [url, setUrl] = useState("");
  const [copied, setCopied] = useState(false);
  useEffect(() => {
    setUrl(`${window.location.origin}/drops?ref=${encodeURIComponent(token)}`);
  }, [token]);

  function copy() {
    navigator.clipboard.writeText(url);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  }

  const shareLines = [
    { label: "Twitter", href: `https://twitter.com/intent/tweet?text=${encodeURIComponent("Daily brief on abandoned trademarks + expiring domains. Worth a look:")}&url=${encodeURIComponent(url)}` },
    { label: "Email",   href: `mailto:?subject=${encodeURIComponent("Drops — daily trademark opportunities")}&body=${encodeURIComponent(`I've been reading this. 3 free drops to start:\n\n${url}`)}` },
    { label: "LinkedIn", href: `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(url)}` },
  ];

  return (
    <div className="card p-5 mb-4 border-brass/30 bg-brass/5">
      <div className="flex items-start gap-4 flex-wrap">
        <div className="flex-1 min-w-[280px]">
          <div className="text-xs uppercase tracking-widest text-brass">Referrals</div>
          <h3 className="mt-1 text-lg font-semibold">Share Drops, get 30 free days.</h3>
          <p className="mt-1 text-sm text-ink/70">
            For every 3 signups from your link, we add 30 days to your subscription.
          </p>
          <div className="mt-3 flex flex-wrap items-center gap-2">
            <input readOnly value={url} className="flex-1 min-w-[220px] font-mono text-xs" />
            <button onClick={copy} className="btn">{copied ? "✓ copied" : "Copy"}</button>
          </div>
          <div className="mt-2 flex gap-3 text-xs">
            {shareLines.map((s) => (
              <a key={s.label} href={s.href} target="_blank" rel="noreferrer" className="text-brass hover:underline">{s.label}</a>
            ))}
          </div>
        </div>
        <div className="text-right">
          <div className="text-xs uppercase tracking-wide text-ink/60">Referrals</div>
          <div className="text-3xl font-semibold">{totalRefs}</div>
          <div className="text-xs text-ink/60">
            {untilNext > 0 ? `${untilNext} until next reward` : "reward pending"}
          </div>
          {rewardedRefs > 0 && (
            <div className="mt-2 text-xs text-emerald-700">
              ✓ {rewardedRefs} reward{rewardedRefs === 1 ? "" : "s"} claimed
            </div>
          )}
        </div>
      </div>
    </div>
  );
}