import React, { ReactElement } from 'react';
import { render, RenderOptions } from '@testing-library/react';
import { DataProvider } from '@/context/DataContext';

/**
 * Custom wrapper that provides all necessary context providers
 */
function AllTheProviders({ children }: { children: React.ReactNode }) {
  return <DataProvider>{children}</DataProvider>;
}

/**
 * Custom render function that wraps components with all necessary providers
 *
 * @example
 * ```tsx
 * import { render, screen } from '@/test/test-utils'
 *
 * test('renders component', () => {
 *   render(<MyComponent />)
 *   expect(screen.getByText('Hello')).toBeInTheDocument()
 * })
 * ```
 */
const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
  render(ui, { wrapper: AllTheProviders, ...options });

// Re-export everything from testing-library
export * from '@testing-library/react';
export { default as userEvent } from '@testing-library/user-event';

// Override render with our custom render
export { customRender as render };