/* Copyright (C) 2024 Manuel Bustillo*/

'use client';

import { AbstractApi } from '@/app/api/abstract-api';
import { TableArrangement } from '@/app/lib/definitions';
import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
import { getSlug } from '@/app/lib/utils';
import { Table } from '@/app/ui/components/table';
import { lusitana } from '@/app/ui/fonts';
import { useState, useEffect } from 'react';

export default function Arrangement({ id }: { id: string }) {

  const [simulation, setSimulation] = useState<TableSimulation | undefined>(undefined);

  function loadSimulation() {
    new AbstractApi<TableSimulation>().get(new TableSimulationSerializer(), id, (object: TableSimulation) => {
      setSimulation(object);
    });
  }

  useEffect(loadSimulation, []);

  return (
    <div className="w-full">
      <div className="w-full items-center justify-between">
        <h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
        <div className="flex flex-row flex-wrap justify-around">
          {simulation && simulation.tables.map((table) => (
            <Table key={table.number} table={table} style="rounded" />
          ))}
        </div>
      </div>
    </div>
  )

}