lti-web-client/src/components/pages/report/expense/skeleton/ReportExpenseSkeleton.tsx

import React from 'react';
import DataStateSkeleton from '@/components/helper/skeleton/DataStateSkeleton';
import Table from '@/components/Table';
import { ColumnDef } from '@tanstack/react-table';

type ReportSkeletonColumn<TData extends object> =
  | ColumnDef<TData>
  | {
      header: string;
      columns: Array<{
        header: string;
        accessorKey?: string;
        cell?: (props: { row: { original: TData } }) => React.ReactNode;
      }>;
    };

const ReportExpenseSkeleton = <TData extends object>({
  columns,
  icon,
  title,
  subtitle,
}: {
  columns: ReportSkeletonColumn<TData>[];
  icon: React.ReactNode;
  title: string;
  subtitle: string;
}) => {
  return (
    <div className='relative size-full'>
      <Table
        data={[]}
        columns={columns}
        isLoading={true}
        className={{
          skeletonCellClassName: 'animate-none w-full h-5 bg-base-content/4',
          headerColumnClassName: 'whitespace-nowrap',
          containerClassName: 'mb-0 overflow-hidden',
          tableWrapperClassName: 'overflow-hidden',
        }}
      />
      <div className='absolute inset-0 flex items-center justify-center'>
        <DataStateSkeleton icon={icon} title={title} description={subtitle} />
      </div>
    </div>
  );
};

export default ReportExpenseSkeleton;