"use client";

import { useState } from "react";

export function ReferralCodeCard({
  code,
  rewardCodes,
  title,
  intro,
  copyLabel,
  copiedLabel,
  rewardsTitle,
}: {
  code: string;
  rewardCodes: { code: string; label: string }[];
  title: string;
  intro: string;
  copyLabel: string;
  copiedLabel: string;
  rewardsTitle: string;
}) {
  const [copied, setCopied] = useState(false);

  return (
    <div className="border border-white/10 rounded-2xl bg-[var(--rk-surface)] p-6">
      <h2 className="text-xs uppercase tracking-[0.25em] text-[var(--rk-ink-muted)] mb-3">{title}</h2>
      <p className="text-sm text-[var(--rk-ink-muted)] mb-4">{intro}</p>
      <div className="flex items-center gap-2 flex-wrap">
        <span className="font-mono text-sm border border-white/15 rounded-lg px-3 py-2">{code}</span>
        <button
          type="button"
          onClick={() => {
            navigator.clipboard.writeText(code).then(() => {
              setCopied(true);
              setTimeout(() => setCopied(false), 2000);
            });
          }}
          className="text-xs border border-white/30 rounded-lg px-3 py-2 hover:border-white transition-colors"
        >
          {copied ? copiedLabel : copyLabel}
        </button>
      </div>

      {rewardCodes.length > 0 && (
        <div className="mt-5 pt-4 border-t border-white/10">
          <p className="text-xs uppercase tracking-[0.1em] text-[var(--rk-ink-muted)] mb-2">{rewardsTitle}</p>
          <ul className="flex flex-col gap-1.5">
            {rewardCodes.map((r) => (
              <li key={r.code} className="text-sm">
                <span className="font-mono">{r.code}</span>
                <span className="text-[var(--rk-ink-muted)]"> · {r.label}</span>
              </li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
}