1  import React, {useState, useRef } from "react";
 2  import * as Dialog from "@radix-ui/react-dialog";
 3  import { Button } from "@radix-ui/themes";
 4  import { Cross2Icon } from "@radix-ui/react-icons";
 5  import styles from "./presentoffer.module.scss";
 6  import useAuth from "../../auth/hooks/useAuth";
 7  
 8  const PresentOffer = ({ open, onClose, onOfferSubmit, onOfferPresentData }) => {
 9    const dialogRef = useRef(null);
10    const { principal } = useAuth();
11    const [recipientAddress, setRecipientAddress] = useState();
12  
13    const handleClose = () => {
14      if (onClose) {
15        onClose();
16      }
17    };
18  
19    const handleRecipientChange = (event) => {
20      const recipientAddress = event.target.value
21      onOfferPresentData(recipientAddress);
22      console.log("Recipient address: ", recipientAddress);
23      setRecipientAddress(recipientAddress); 
24    }
25  
26    const handleSendButton = () => {
27      onOfferSubmit();
28      onClose()
29    }
30  
31    return (
32      <Dialog.Root open={open} onClose={handleClose} ref={dialogRef} style={{ alignItems: 'center', justifyContent: 'center' }}>
33        <Dialog.Overlay className={styles.DialogOverlay} />
34        <Dialog.Content className={`${styles.DialogContent} ${styles.centeredContent}`}>
35          <Dialog.Close asChild>
36            <button className={styles.DialogCloseButton} onClick={handleClose}>
37              <Cross2Icon />
38            </button>
39          </Dialog.Close>
40          <Dialog.Title className={styles.DialogTitle}>Send</Dialog.Title>
41          <fieldset>
42            <label className={styles.SendModalLabel}>Destination</label>
43            <input 
44              className={styles.SendModalInput} 
45              placeholder="Enter recipient address"
46              onChange={handleRecipientChange}
47            />
48            {/* <label className={styles.SendModalLabel}>Amount</label> */}
49            
50            {/* <input className={styles.SendModalInput} /> */}
51          </fieldset>
52          <div className={styles.AddressContainer}>
53            <span className={styles.AddressLabel}>Source:</span>
54            <span className={styles.AddressValue}>{principal}</span>
55          </div>
56          <div className={styles.ButtonContainer}>
57            <Button className={`${styles.Button} ${styles.SendModalCancelButton}`}
58              onClick={handleClose}
59            >
60              Cancel
61            </Button>
62            <Button className={`${styles.Button} ${styles.SendModalNextButton}`} 
63              onClick={handleSendButton}>
64              Next
65            </Button>
66          </div>
67        </Dialog.Content>
68      </Dialog.Root>
69    );
70  };
71  
72  export default PresentOffer;