import { Icon } from "../../icon";

interface Props {
  newKeyName: string;
  setNewKeyName: (name: string) => void;
  generating: boolean;
  onSubmit: (e: React.FormEvent) => void;
}

export const SSHKeyCreateForm = ({ newKeyName, setNewKeyName, generating, onSubmit }: Props) => {
  return (
    <form onSubmit={onSubmit} className="stack">
      <div className="form-group">
        <label htmlFor="key-name">Key Name</label>
        <input
          id="key-name"
          type="text"
          value={newKeyName}
          onChange={(e) => setNewKeyName(e.target.value)}
          placeholder="e.g., GitHub Work"
          required
        />
      </div>
      <button type="submit" className="primary-button" disabled={generating}>
        {generating ? (
          <>
            <Icon name="loading" size="sm" />
            Generating...
          </>
        ) : (
          <>
            <Icon name="add" size="sm" />
            Generate SSH Key
          </>
        )}
      </button>
    </form>
  );
};
