'use client'

import { Guest } from '@/app/lib/definitions';
import { useState, Suspense, useEffect } from 'react';

export default function guestsTable() {

  const [guests, setGuests] = useState<Guest[]>([]);

  useEffect(() => {
    if (guests.length > 0) {
      return;
    }
    fetch("http://localhost:3001/guests.json")
      .then((response) => response.json())
      .then((data) => {
        setGuests(data.data.map((record: any) => {
          return ({
            id: record.id,
            name: record.attributes.name,
            email: record.attributes.email,
          });
        }))
      });
  });

  return (
    <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
      <p className="py-3">There are {guests.length} guests in the list</p>
      <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
          <tr>
            <th scope="col" className="px-6 py-3">
              Name
            </th>
            <th scope="col" className="px-6 py-3">
              Email
            </th>
            <th scope="col" className="px-6 py-3">
              Status
            </th>
          </tr>
        </thead>
        <tbody>
          <Suspense fallback="<tr><td colspan=3> Loading data</td></tr>">
            {guests.map((guest) => (
              <tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
                <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                  {guest.name}
                </th>
                <td className="px-6 py-4">
                  {guest.email}
                </td>
                <td className="px-6 py-4">
                  Confirmed
                </td>
              </tr>
            ))}
          </Suspense>
        </tbody>
      </table>
    </div>
  );
}