import 'whatwg-fetch';
import React from "react";
import { render } from '@testing-library/react';
import { ToastProvider } from '@/components/Toast';

// Mock react-responsive-masonry
jest.mock("react-responsive-masonry", () => ({
  __esModule: true,
  default: ({ children }: { children: React.ReactNode }) =>
    React.createElement("div", null, children),
  get ResponsiveMasonry() {
    const ResponsiveMasonryComponent = ({ children }: { children: React.ReactNode }) =>
      React.createElement("div", null, children);
    ResponsiveMasonryComponent.displayName = 'ResponsiveMasonry';
    return ResponsiveMasonryComponent;
  },
}));

// Mock next/link
jest.mock('next/link', () => {
  const LinkComponent = ({ children }: { children: React.ReactNode }) => children;
  LinkComponent.displayName = 'Link';
  return LinkComponent;
});

// Mock next/image
jest.mock('next/image', () => {
  const ImageComponent = ({ src, alt, ...props }: Record<string, unknown>) => 
    React.createElement('img', { src, alt, ...props });
  ImageComponent.displayName = 'Image';
  return ImageComponent;
});

// Custom render function with ToastProvider
const customRender = (ui: React.ReactElement, options = {}) =>
  render(ui, {
    wrapper: ({ children }) => React.createElement(ToastProvider, null, children),
    ...options,
  });

// Re-export everything
export * from '@testing-library/react';
export { customRender as render };