import { useEffect, useState } from "react";
import axios from "axios";
import Navbar from "./Navbar";
import Footer from "./Footer";

const SearchMysql = () => {
  const [properties, setProperties] = useState([]);

  // Fetch data from backend API
  useEffect(() => {
    const fetchAllProperties = async () => {
      try {
        const res = await axios.get(`${import.meta.env.VITE_REACT_APP_SECRET}/mysql/searchmysql`);
        setProperties(res.data); // Set the data to the state
      } catch (err) {
        console.log("Error fetching data:", err);
      }
    };
    fetchAllProperties();
  }, []);

  return (
    <>
    <Navbar />
    <br />    <br />    <br />    <br />    <br />    <br />
    <p style={{ fontSize: "1.5rem", color: "#F74B02" }} >
    This is just a sample testing data to showcase the field named "client_name" present in table named : "client_info" available in the database named :"defaultdb".
                  </p>
      {/* Check if properties array is populated before mapping */}
      {properties && properties.length > 0 ? (
        properties.map((property, index) => (
          <div key={index} className="property">
            <h2>{property.client_name}</h2> {/* Display client_name */}
          </div>
        ))
      ) : (
        <p>No properties found.</p>
      )}

      <Footer />
      
    </>
  );
};

export default SearchMysql;
