import React, { Fragment } from "react";
// import cities from "../../cities.json";
import users from "../../users.json";

const Home = () => {
  // console.log(users);

  // myAPIData()
  const MyAPIData = () => {
    users.map(mydata => {
      return (
        <div className="card">
          <div className="content-section">
            <h1>{mydata.first_name}</h1>
            <p>{mydata.last_name}</p>
            <p>{mydata.email}</p>
            <div className="icon-group">
              <span>F</span>
              <span>T</span>
              <span>I</span>
              <span>Y</span>
            </div>
            <div className="btn-group">
              <button>Message</button>
              <button>Subscribe</button>
            </div>
            <div className="another-group">
              <div>
                <h3>20.4K</h3>
              </div>
              <div>
                <h3>14.3K</h3>
              </div>
              <div>
                <h3>12.8K</h3>
              </div>
            </div>
          </div>
        </div>
      );
    });
  };

  // console.log(users);
  return (
    <Fragment>
      <main>
        <div className="body-xyz">
          {/* <MyAPIData /> */}
          <div>Hello world!</div>
        </div>
      </main>
    </Fragment>
  );
};

export default Home;