deleting questions and answers, selecting answers

SurveyFrontend/src/components/AnswerOption/AnswerOption.tsx

@@ -3,17 +3,20 @@ import styles from'./AnswerOption.module.css';
 
 const single_selected_response = '../../../public/radio_button_checked.svg';
 const multiple_selected_response = '../../../public/check_box.svg';
-// const single_response =
-// const multiple_response =
+const single_response = '../../../public/radio_button_unchecked.svg';
+const multiple_response ='../../../public/emptyCheckbox.svg';
 
 interface AnswerOptionProps{
     index: number;
     value: string;
     onChange: (value: string) => void;
+    onDelete:(index: number) => void;
     selectedType: 'single' | 'multiply';
+    isSelected: boolean;
+    toggleSelect: () => void;
 }
 
-const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, selectedType}) => {
+const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, onDelete, selectedType, isSelected, toggleSelect}) => {
     const [currentValue, setCurrentValue] = useState(value);
     const [isEditing, setIsEditing] = useState(false);
 
@@ -33,12 +36,12 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, sele
 
     const handleSave = () => {
         setIsEditing(false);
-        onChange(currentValue); // Отправляем измененное значение родителю
+        onChange(currentValue);
     };
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
         if (event.key === "Enter") {
-            event.preventDefault(); // Предотвращаем перенос строки в textarea
+            event.preventDefault();
             handleSave();
         }
     };
@@ -53,17 +56,23 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, sele
         }
     }, [isEditing]);
 
-    const getImage = (typeValue: string): string => {
-        if (typeValue === 'multiply') {
-            return multiple_selected_response;
+    const getImage = () => {
+        if (selectedType === 'multiply') {
+            return isSelected ? multiple_selected_response : multiple_response;
         } else {
-            return single_selected_response;
+            return isSelected ? single_selected_response : single_response;
         }
     };
 
     return (
         <div className={styles.answer}>
-            <img className={styles.answerIcon} src={getImage(selectedType)} alt="" />
+            <button className={styles.buttonMarker} onClick={toggleSelect}>
+                <img
+                    className={styles.answerIcon}
+                    src={getImage()}
+                    alt=""
+                />
+            </button>
             {isEditing ? (
                 <textarea className={styles.answerInput}
                           ref={textAreaRef}
@@ -78,6 +87,9 @@ const AnswerOption: React.FC<AnswerOptionProps> = ({index, value, onChange, sele
                     {currentValue || `Ответ ${index}`}
                 </button>
             )}
+            <button className={styles.deleteButton} onClick={() => onDelete(index)}>
+                <img src='../../../public/delete.svg' alt="Удалить" />
+            </button>
         </div>
     );
 };