import React from 'react';
import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi } from 'vitest';
import { PaginatedDataTable } from './PaginatedDataTable';

// Mock the sub-components
vi.mock('@/components/ui/pagination-with-links', () => ({
  __esModule: true,
  default: ({ page, totalCount }: any) => <div data-testid="pagination">Page: {page}, Total: {totalCount}</div>,
}));

vi.mock('@/components/ui/data-table', () => ({
  DataTable: ({ data }: any) => (
    <div data-testid="data-table">
      {data.map((item: any, i: number) => (
        <div key={i}>{item.name}</div>
      ))}
    </div>
  ),
}));

describe('PaginatedDataTable', () => {
  const mockColumns = [] as any;
  const mockData = [{ name: 'Item 1' }, { name: 'Item 2' }];

  it('renders dual pagination and data table', () => {
    render(
      <PaginatedDataTable
        columns={mockColumns}
        data={mockData}
        page={1}
        pageSize={10}
        totalCount={20}
      />
    );

    const paginationElements = screen.getAllByTestId('pagination');
    expect(paginationElements).toHaveLength(2);
    expect(paginationElements[0]).toHaveTextContent('Page: 1, Total: 20');
    expect(paginationElements[1]).toHaveTextContent('Page: 1, Total: 20');

    expect(screen.getByTestId('data-table')).toBeInTheDocument();
    expect(screen.getByText('Item 1')).toBeInTheDocument();
    expect(screen.getByText('Item 2')).toBeInTheDocument();
  });

  it('applies correct spacing classes', () => {
    const { container } = render(
      <PaginatedDataTable
        columns={mockColumns}
        data={mockData}
        page={1}
        pageSize={10}
        totalCount={20}
      />
    );

    // The root element should have the space-y-4 class
    expect(container.firstChild).toHaveClass('space-y-4');
  });
});