import React from "react";
import op from "object-path";
import config from "~/config";
import ky from "ky";
// const config = {
//   title: "Hello World",
//   description: "Hello World description",
// };

const data = {
  title: "Hello World",
  description: "Hello World description",
  og: {
    title: config.title,
    description: config.description,
    image: "https://duogeeks.com/images/logo.png",
  },
};

const HelloWorld: React.FC = () => {
  const [state, setState] = React.useState([]);
  React.useEffect(() => {
    ky.get("https://jsonplaceholder.typicode.com/todos/")
      .json()
      .then((data) => {
        setState(data);
      });
  }, []);

  return (
    <div>
      <strong>Hello World !</strong>
      <p>{data.description}</p>
      <p>Name: {op.get(data, "og.title")}</p>

      <div>
        <h3>TODO Data</h3>
        <ul>
          {state.map((item, index) => (
            <li key={index}>
              {item.completed ? "✅" : "🤷"} - {item.title} (#{item.id})
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default HelloWorld;