'use client';

import PageHeader, { PageHeaderTypes } from '@/app/shared/page-header';
import ImportButton from '@/app/shared/import-button';
import ExportButton from '@/app/shared/export-button';

type TableLayoutProps = {
  data: unknown[];
  header: string;
  fileName: string;
  showExport?: boolean;
  showImport?: boolean;
} & PageHeaderTypes;

export default function TableLayout({
  data,
  header,
  fileName,
  children,
  showExport = true,
  showImport = true,
  ...props
}: React.PropsWithChildren<TableLayoutProps>) {
  return (
    <>
      <PageHeader {...props}>
        <div className="mt-4 flex items-center gap-3 @lg:mt-0">

          {showExport && (
            <ExportButton
              data={data}
              fileName={fileName}
              header={header}
            />
          )}

          {showImport && (
            <ImportButton title="Import File" />
          )}

        </div>
      </PageHeader>

      {children}
    </>
  );
}