/* Copyright (C) 2024 Manuel Bustillo*/

'use client';

import React, { useState } from 'react';
import { TableArrangement, Guest } from '@/app/lib/definitions';
import { lusitana } from '@/app/ui/fonts';
import { Table } from '@/app/ui/components/table';
import { getSlug } from '@/app/lib/utils';

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

    const [tables, setTables] = useState<Array<TableArrangement>>([]);

    function loadTables() {
        fetch(`/api/${getSlug()}/tables_arrangements/${id}`)
            .then((response) => response.json())
            .then((data) => {
                setTables(data.map((record: any) => {
                    return ({
                        id: record.number,
                        guests: record.guests
                    });
                }));
            }, (error) => {
                return [];
            });
    }

    tables.length === 0 && loadTables();

    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">
                    {tables.map((table) => (
                        <Table key={table.number} guests={table.guests || []} style="rounded" />
                    ))}
                </div>
            </div>
        </div>
    )

}