1  import React, { useState } from 'react';
 2  import { BLACK, BLUE, RED, WHITE } from '../constants/colors';
 3  import { renameRepo } from '../services/electronService';
 4  
 5  const RenamePanel = ({ isOpen, onClose, repoName }) => {
 6    const [newName, setNewName] = useState(repoName);
 7    const [error, setError] = useState(null);
 8  
 9    const handleSave = async () => {
10      try {
11        setError(null);
12        await renameRepo(repoName, newName);
13        onClose();
14      } catch (error) {
15        console.error(`Error renaming ${repoName} to ${newName}:`, error);
16        setError(`Failed to rename repository: ${error.message}`);
17      }
18    };
19  
20    if (!isOpen) return null;
21  
22    return (
23      <div style={{
24        position: 'fixed',
25        top: '50%',
26        left: '50%',
27        transform: 'translate(-50%, -50%)',
28        backgroundColor: BLACK,
29        color: WHITE,
30        padding: '20px',
31        borderRadius: '8px',
32        zIndex: 1000,
33        boxShadow: `0 0 0 2px ${BLUE}`,
34      }}>
35        <h2 style={{ color: WHITE }}>Rename</h2>
36        <div style={{ display: 'flex', justifyContent: 'center', margin: '0 20px' }}>
37          <input
38            type="text"
39            value={newName}
40            onChange={(e) => setNewName(e.target.value)}
41            style={{
42              width: '100%',
43              padding: '5px',
44              marginBottom: '10px',
45              backgroundColor: BLACK,
46              color: WHITE,
47              border: `1px solid ${BLUE}`,
48              borderRadius: '4px',
49              outline: 'none',
50            }}
51            onFocus={(e) => {
52              e.target.style.border = `1px solid ${RED}`;
53            }}
54            onBlur={(e) => {
55              e.target.style.border = `1px solid ${BLUE}`;
56            }}
57          />
58        </div>
59        {error && <div style={{ color: RED, marginBottom: '10px' }}>{error}</div>}
60        <div style={{ display: 'flex', justifyContent: 'flex-end', marginTop: '20px' }}>
61          <button onClick={onClose} style={{ 
62            marginRight: '10px',
63            padding: '5px 10px',
64            backgroundColor: RED,
65            color: WHITE,
66            border: 'none',
67            borderRadius: '4px',
68            cursor: 'pointer'
69          }}>
70            Cancel
71          </button>
72          <button onClick={handleSave} style={{
73            padding: '5px 10px',
74            backgroundColor: BLUE,
75            color: WHITE,
76            border: 'none',
77            borderRadius: '4px',
78            cursor: 'pointer',
79          }}>
80            Save
81          </button>
82        </div>
83      </div>
84    );
85  };
86  
87  export default RenamePanel;