import React, { useState } from 'react';

export default function KeypairManager({ keypairs, onSelect, onCreate, selectedKeypair }) {
  const [creating, setCreating] = useState(false);

  return (
    <div className="keypair-manager">
      <label>Keypair:</label>
      <select value={selectedKeypair || ''} onChange={e => onSelect(e.target.value)}>
        <option value="" disabled>Select keypair</option>
        {keypairs.map(kp => (
          <option key={kp.id} value={kp.id}>{kp.label}</option>
        ))}
      </select>
      <button onClick={() => setCreating(true)} style={{marginLeft: 8}}>Create New</button>
      {creating && (
        <div style={{marginTop: '0.5rem'}}>
          <button onClick={() => { onCreate(); setCreating(false); }}>Create Secp256k1 Keypair</button>
          <button onClick={() => setCreating(false)} style={{marginLeft: 8}}>Cancel</button>
        </div>
      )}
      {selectedKeypair && (
        <div style={{marginTop: '0.5rem'}}>
          <span>Public Key: <code>{keypairs.find(kp => kp.id === selectedKeypair)?.publicKey}</code></span>
          <button onClick={() => navigator.clipboard.writeText(keypairs.find(kp => kp.id === selectedKeypair)?.publicKey)} style={{marginLeft: 8}}>Copy</button>
        </div>
      )}
    </div>
  );
}