import { useEffect, useState } from "react"


const Contact = ({listing}) => {
    const [agent, setAgent] = useState(null);
    useEffect(() => {
        const fetchAgent = async () => {
            try {
              const res = await fetch(`/server/user/${listing.userRef}`);
              const data = await res.json();
              setAgent(data);
            } catch (error) {
              console.log(error);
            }
          };
          fetchAgent();
    }, [listing.userRef]);



  return (
    <div>
        {
            agent && (
                <div className="">
                    <p>Contact<span>{agent.username}</span>{' '} for {' '} <span>{listing.name.toLowerCase()}</span></p>
                </div>
            )
        }
    </div>
  )
}

export default Contact