'use client';

import { useState } from 'react';

export function TokenReveal({ token }: { token: string }) {
  const [revealed, setRevealed] = useState(false);
  const [copied, setCopied] = useState(false);

  const masked = `${token.slice(0, 6)}${'•'.repeat(20)}${token.slice(-4)}`;

  async function copy() {
    try {
      await navigator.clipboard.writeText(token);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {
      setCopied(false);
    }
  }

  return (
    <div>
      <div className="token">{revealed ? token : masked}</div>
      <div className="row" style={{ marginTop: '0.5rem' }}>
        <button
          type="button"
          className="secondary"
          onClick={() => setRevealed((r) => !r)}
        >
          {revealed ? 'Hide' : 'Reveal'}
        </button>
        <button type="button" className="secondary" onClick={copy}>
          {copied ? 'Copied!' : 'Copy'}
        </button>
      </div>
    </div>
  );
}