import type { Route } from "./+types/home";
import { useEffect, useState } from "react";
import "../../config.json";

const API_URL = process.env.API_URL;
type transaction = { id: number; tier: number; type: string; cost: number };

export function meta({}: Route.MetaArgs) {
  return [{ title: "Albion Online Transaction Tracker" }];
}

export default function Home() {
  return (
    <>
      <TransactionTable />
    </>
  );
}

function TransactionTable() {
  const [transactions, setTransactions] = useState<transaction[]>([]);

  useEffect(() => {
    fetch(`${API_URL}/transactions`)
      .then((response) => response.json())
      .then((data) => {console.log(data); setTransactions(data);});
  }, [API_URL]);

  return (
    <>
      <table>
        <thead>
          <tr>
            <th>Timestamp</th>
            <th>Tier</th>
            <th>Type</th>
            <th>Amount</th>
          </tr>
        </thead>
        <tbody>
          {transactions.map((transaction) => (
            <tr key={transaction.id}>
              <td></td>
              <td>{transaction.tier}</td>
              <td>{transaction.type}</td>
              <td>{transaction.cost}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}