import { useLoaderData,Link } from '@remix-run/react'
import { json } from "@remix-run/cloudflare";

export const loader = async ({request}) => {
    let res = await fetch(`https://example.com/hogehogeapi`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'hogehoge',
      },
      body: JSON.stringify({
        query: `
        query {
          entries(limit:10){
            title
            id
            url
            uri
            slug
            postDate @formatDateTime(format: "Y-m-d")
          }
        }`,
        // variables: {
        //   query: search,
        // },
      }),
    })
    return res.json()
}

export default function Index() {
  const { data } = useLoaderData();
  return (
    <div className="container mx-auto">
      <header>
        <h1 className="text-3xl"><Link to="/">mersy note</Link></h1>
      </header>
      <main>
        {data ? (
          <div className="prose lg:prose-xl">
            {data.entries.map((entry) => (
              <ul key={entry.id}>
                <li className="inline-grid">
                  <time className="">{entry.postDate}</time>
                  <Link to={`/article/${entry.slug}`} prefetch="intent">
                  {entry.title}
                  </Link>
                </li>
              </ul>
            ))}
          </div>
        ) : <h4>No Results</h4>}
      </main>
    </div>
  );
}