'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;
  actions?: React.ReactNode;
} & PageHeaderTypes;

export default function TableLayout({
  data,
  header,
  fileName,
  children,
  showExport = true,
  showImport = true,
  actions,
  ...props
}: React.PropsWithChildren<TableLayoutProps>) {
  const showDefaultActions = showExport || showImport;

  return (
    <>
      <PageHeader {...props}>
        <div className="mt-4 flex items-center gap-3 @lg:mt-0">

          {/* ✅ Default Buttons */}
          {showDefaultActions && (
            <>
              {showExport && (
                <ExportButton
                  data={data}
                  fileName={fileName}
                  header={header}
                />
              )}

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

          {/* ✅ Custom UI (Tabs / Filters / Buttons / etc.) */}
          {actions}

        </div>
      </PageHeader>

      {children}
    </>
  );
}