import { Check, Copy, Gift } from 'lucide-react';

interface ReferralCompletionCardProps {
  referralUrl: string;
  /** True for ~2s after the user clicks "Copy" — drives the Check vs Copy icon swap. */
  referralCopied: boolean;
  onCopy: () => Promise<void>;
}

/**
 * B2C viral loop: referral link inside the post-analysis disclosure. Pure
 * presentational — copy state is owned by the parent so the wizard can fire
 * the `REFERRAL_LINK_COPIED` analytics event in the same callback that
 * writes to the clipboard.
 *
 * Uses the `Gift` icon (referral semantics) rather than `Sparkles` —
 * Sparkles is reserved for AI-generated surfaces.
 */
export function ReferralCompletionCard({
  referralUrl,
  referralCopied,
  onCopy,
}: ReferralCompletionCardProps) {
  return (
    <div className="rounded-lg border p-4">
      <div className="flex items-start gap-2 mb-1">
        <Gift className="size-4 text-primary mt-0.5 shrink-0" aria-hidden="true" />
        <p className="text-sm font-semibold text-foreground">
          Invite a colleague — you both get 5 extra AI drafts
        </p>
      </div>
      <p className="text-xs text-muted-foreground mb-3">
        When a friend signs up with your link, you each receive 5 bonus AI draft credits
        automatically within 24 hours.
      </p>
      <div className="flex items-center gap-2 rounded-md bg-muted px-3 py-2 text-xs font-data overflow-hidden">
        <span className="flex-1 truncate text-muted-foreground">{referralUrl}</span>
        <button
          type="button"
          onClick={onCopy}
          aria-label="Copy referral link"
          className="shrink-0 rounded p-1 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
        >
          {referralCopied ? (
            <Check className="size-3.5 text-success-strong" />
          ) : (
            <Copy className="size-3.5 text-muted-foreground" />
          )}
        </button>
      </div>
    </div>
  );
}