import React from 'react';
import {render, screen} from '@testing-library/react';

jest.mock('next-intl', () => ({
  useTranslations: () => (key: string) => key,
  useLocale: () => 'fr',
  NextIntlClientProvider: ({children}: {children: React.ReactNode}) => <>{children}</>,
}));

jest.mock('next/link', () => {
  return ({children, href, ...props}: {children: React.ReactNode; href: string; [key: string]: unknown}) => (
    <a href={href} {...props}>{children}</a>
  );
});

jest.mock('next/dynamic', () => {
  return () => {
    const MockComponent = () => <div data-testid="dynamic-component">Mock</div>;
    MockComponent.displayName = 'MockComponent';
    return MockComponent;
  };
});

jest.mock('next/navigation', () => ({
  useRouter: () => ({push: jest.fn(), replace: jest.fn()}),
  usePathname: () => '/',
}));

jest.mock('framer-motion', () => ({
  motion: {
    div: ({children, ...props}: any) => <div {...props}>{children}</div>,
    span: ({children, ...props}: any) => <span {...props}>{children}</span>,
    section: ({children, ...props}: any) => <section {...props}>{children}</section>,
  },
  AnimatePresence: ({children}: any) => <>{children}</>,
  useInView: () => true,
}));

jest.mock('@/i18n', () => {
  return jest.fn().mockResolvedValue({
    messages: {HomePage: {}},
    t: (key: string) => key,
  });
});

import IndexPage from '../page';
import initTranslations from '@/i18n';

describe('IndexPage', () => {
  it('loads translations for the locale from params', async () => {
    const jsx = await (IndexPage as any)({
      params: Promise.resolve({locale: 'en'}),
    });
    render(jsx);

    expect(initTranslations).toHaveBeenCalledWith({locale: 'en'});
  });

  it('renders homepage sections', async () => {
    const jsx = await (IndexPage as any)({
      params: Promise.resolve({locale: 'fr'}),
    });
    render(jsx);

    expect(screen.getByText('hero_title_line1')).toBeInTheDocument();
  });
});