import React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import MainPage from '../page'

// Mock next/navigation
jest.mock('next/navigation', () => ({
  useRouter() {
    return {
      push: jest.fn(),
      replace: jest.fn(),
      refresh: jest.fn(),
      back: jest.fn(),
      forward: jest.fn(),
    }
  },
  usePathname() {
    return '/'
  },
  useSearchParams() {
    return new URLSearchParams()
  },
}))

// Mock next/image
jest.mock('next/image', () => ({
  __esModule: true,
  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => {
    // eslint-disable-next-line jsx-a11y/alt-text
    return <img {...props} />
  },
}))

// Mock ClientContent component since it's a client component
jest.mock('../components/ClientContent', () => ({
  ClientContent: () => <div data-testid="client-content">Client Content</div>
}))

// Mock HeroSection component
jest.mock('../components/HeroSection', () => ({
  __esModule: true,
  default: () => <div data-testid="hero-section">Hero Section</div>
}))

describe('Pages', () => {
  describe('Landing Page', () => {
    it('renders the hero section', () => {
      render(<MainPage />)
      const heroSection = screen.getByTestId('hero-section')
      expect(heroSection).toBeInTheDocument()
    })

    it('renders the client content section', () => {
      render(<MainPage />)
      const clientContent = screen.getByTestId('client-content')
      expect(clientContent).toBeInTheDocument()
    })
  })
})