import { useLoaderData } from "react-router";

type Category = {
  name: string;
  group: { name: string } | undefined;
};

export async function loader(): Promise<Category[]> {
  return [
    { name: "Books", group: { name: "Media" } },
    { name: "Movies", group: { name: "Media" } },
    { name: "Groceries", group: { name: "Shopping" } },
    { name: "Electronics", group: { name: "Shopping" } },
    { name: "Misc", group: undefined }
  ];
}

export default function Categories() {
  const data = useLoaderData<typeof loader>();

  return (
    <table>
      <thead>
        <tr>
          <th scope="col">name</th>
          <th scope="col">group</th>
        </tr>
      </thead>
      <tbody>
        {data.map((t) => (
          <tr>
            <td>{t.name}</td>
            <td>{t.group?.name}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}