'use client'
import { ReactNode } from "react";

type TableGenOptions = {
    editButton:boolean;
    deleteButton:boolean;
}

type Props = {
    headings:Array<string>;
    children:ReactNode;
    entityName:string;
    options?:TableGenOptions
}

export default function EntityManagementTable(props:Props){
    const options = props.options ?  props.options : {editButton: true, deleteButton: true}
    console.log(props.headings)
    return <>
    <span className="flex flex-row flex-grow w-[100%] pl-2 pr-2"><h1 className="p-2 inline-block">{props.entityName} Management</h1><section className="flex-grow"></section><button className='btn btn-success h-12 mt-auto mb-auto self-end'>New</button></span>
    <table className="table overflow-scroll">
        <thead>
            <tr>
                {[...props.headings,options.editButton ? 'Edit' : null, options.deleteButton ? 'Delete' : null].map((h)=>
                h ? <th key={h} scope="col">{h}</th> : ''
                )}
            </tr>
        </thead>
        <tbody>
            {props.children}
        </tbody>
    </table>
    </>
}