import { userInfo } from 'os';
import React, { useState, useEffect } from 'react'

interface User {
  id: number;
  name: string;
  email: string;
}

const UsersPage = async () => {
  // Get the json file
  const res = await fetch(
    'https://jsonplaceholder.typicode.com/users',
    // Option to disable caching entirely, useful for data that changes frequently.
    {cache: 'no-store'}

    // Option to store the data within the cache for a certain period of time
    // { next: { revalidate: 10 }} // get fresh data every 10 seconds
  );
  // Create an object that will hold the users within the json file
  const users: User[] = await res.json();
  // Create a cache in order to hold the data for later(useful for tokens)


  return (
    <>
    <h1>Users</h1>
    {/* <p>{new Date().toLocaleTimeString()}</p> */}
    {/* instead of an unordered list, we'll use a table
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul> */}
    <table className='table table-bordered'>
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        {users.map(user=> <tr key={user.id}>
            <td>{user.name}</td>
            <td>{user.email}</td>
        </tr>)}
      </tbody>
    </table>
    </>
  )
}

export default UsersPage