that code is good ?
import { useState } from "react";
import { Modal } from "react-bootstrap";
import styles from "@/pages/lojista/vendas/vendas.module.css";

export default function ModalCliente({ show, handleClose, cliente, clienteInfo }) {
    const [mensagem, setMensagem] = useState("");
    const [historicoMensagens, setHistoricoMensagens] = useState([
        { remetente: "cliente", conteudo: "Olá, tenho uma duvida" },
        { remetente: "loja", conteudo: "Claro! Em que posso ajudar?" },
    ]);

    const enviarMensagem = () => {
        if (mensagem.trim()) {
            setHistoricoMensagens([...historicoMensagens, { remetente: "loja", conteudo: mensagem }]);
            setMensagem("");
        }
    };

    return (
        <Modal show={show} onHide={handleClose} size="xl">
            <Modal.Header closeButton style={{ display: "flex", background: "#f0f0f0" }}>
                <h5 className="modal-title" style={{ color: "#212529" }}>
                    Informações do Cliente - {cliente}
                </h5>
            </Modal.Header>
            <Modal.Body>
                <div style={{ display: "flex", flexDirection: "row", gap: 20, padding: 20 }}>
                    <div style={{ flex: 1 }}>
                        <h5>Informações do Cliente</h5>
                        <p>Nome: {cliente}</p>
                        <p>Telefone: (16)98000-5090</p>
                        {clienteInfo.map((info, index) => (
                            <div key={index} style={{ paddingTop: 20 }}>
                                <h6>Endereço</h6>
                                <p>Estado: {info.Estado}</p>
                                <p>Cidade: {info.Cidade}</p>
                                <p>Bairro: {info.Bairro}</p>
                                <p>Rua: {info.Rua}</p>
                                <p>CEP: {info.CEP}</p>
                                <p>Número: {info.Numero}</p>
                                <p>Complemento: {info.complemento}</p>
                            </div>
                        ))}
                    </div>

                    <div
                        style={{
                            flex: 2,
                            display: "flex",
                            flexDirection: "column",
                            border: "1px solid #ccc",
                            padding: 20,
                            borderRadius: "10px",
                            boxShadow: "0px 0px 5px 0px #888888",
                        }}
                    >
                        <div
                            className={styles["message-content-info"]}
                            style={{ flex: 1, overflowY: "auto", marginBottom: 20 }}
                        >
                            {historicoMensagens.map((msg, index) => (
                                <div
                                    key={index}
                                    className={`${styles["message-item"]} ${msg.remetente === "loja" ? styles["me"] : ""}`}
                                >
                                    {msg.remetente !== "loja" && ( // Mostrar avatar na esquerda para o cliente
                                        <div className={styles["message-avatar"]}>
                                            <img src="/img/homem.jpg" alt="Avatar Cliente" width={40} height={40} />
                                        </div>
                                    )}
                                    <div className={styles["message-description"]}>
                                        <p>{msg.conteudo}</p>
                                    </div>
                                    {msg.remetente === "loja" && (
                                        <div className={styles["message-avatar"]}>
                                            <img src="/img/logo/noocly_simbolo.svg" alt="Avatar Loja" />
                                        </div>
                                    )}
                                </div>
                            ))}
                        </div>
                        <div className={styles["message-reply"]}>
                            <textarea
                                cols={40}
                                rows={3}
                                className="form-control"
                                placeholder="Escrever mensagem..."
                                value={mensagem}
                                onChange={e => setMensagem(e.target.value)}
                            />
                            <div
                                style={{
                                    display: "flex",
                                    justifyContent: "space-between",
                                    alignItems: "center",
                                    marginTop: 10,
                                }}
                            >
                                <button
                                    type="submit"
                                    className="theme-btn"
                                    onClick={enviarMensagem}
                                    style={{ background: "var(--theme-lojista-3)" }}
                                >
                                    <span className="far fa-paper-plane" /> Enviar Mensagem
                                </button>
                                <button
                                    onClick={handleClose}
                                    className="theme-btn"
                                    style={{ backgroundColor: "#dc2626" }}
                                >
                                    Cancelar
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </Modal.Body>
        </Modal>
    );
}