import React, { useState } from 'react';

export default function SignMessage({ onSign, signature, loading }) {
  const [message, setMessage] = useState('');

  return (
    <div className="sign-message">
      <label>Message to sign:</label>
      <input
        type="text"
        placeholder="Enter plaintext message"
        value={message}
        onChange={e => setMessage(e.target.value)}
        style={{width: '100%', marginBottom: 8}}
      />
      <button onClick={() => onSign(message)} disabled={!message || loading}>
        {loading ? 'Signing...' : 'Sign'}
      </button>
      {signature && (
        <div style={{marginTop: '0.5rem'}}>
          <span>Signature: <code>{signature}</code></span>
          <button onClick={() => navigator.clipboard.writeText(signature)} style={{marginLeft: 8}}>Copy</button>
        </div>
      )}
    </div>
  );
}