import Image from 'next/image';
import { UpdateInvoice, DeleteInvoice } from '@/app/ui/guests/buttons';
import gueststatus from '@/app/ui/guests/status';
import { formatDateToLocal, formatCurrency } from '@/app/lib/utils';
import { Guest } from '@/app/lib/definitions';

export default async function guestsTable() {
  const guests: Guest[] = [
    {
      id: '1',
      name: 'John Doe',
      email: 'foo@bar.com'
    },
    {
      id: '2',
      name: 'Jane Doe',
      email: 'jane@bar.com',
    },
  ];

  return (
    <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
      <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>
          {guests.map((guest) => (
            <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
              <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>
          ))}
        </tbody>
      </table>
    </div>
  );
}