'use client';

import { useState } from 'react';
import CopyButton from './CopyButton';

interface KeyDisplayProps {
  apiKey: string;
  label?: string;
  className?: string;
}

export default function KeyDisplay({ apiKey, label = 'API Key', className = '' }: KeyDisplayProps) {
  const [revealed, setRevealed] = useState(false);

  const maskedKey = apiKey ? `${apiKey.substring(0, 8)}${'•'.repeat(48)}` : '';
  const displayKey = revealed ? apiKey : maskedKey;

  return (
    <div className={`space-y-2 ${className}`}>
      <label className="block text-sm font-medium text-slate-300">{label}</label>
      <div className="flex gap-2">
        <div className="flex-1 px-4 py-3 bg-slate-900 border border-slate-700 rounded-lg font-mono text-sm text-slate-200 overflow-x-auto">
          {displayKey || 'No key generated yet'}
        </div>
        {apiKey && (
          <>
            <button
              onClick={() => setRevealed(!revealed)}
              className="px-4 py-2 text-sm font-medium bg-slate-700 text-slate-200 rounded-lg hover:bg-slate-600 transition-colors"
            >
              {revealed ? 'Hide' : 'Show'}
            </button>
            <CopyButton text={apiKey} />
          </>
        )}
      </div>
    </div>
  );
}