import React from 'react';
import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import { ChakraProvider } from '@chakra-ui/react';

import NotFound from '../notFound/notFound';

// Mock the translation hook
jest.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string) => {
      const translations = {
        'notFound.title': 'Page Not Found',
        'notFound.description': 'The page you are looking for does not exist',
        'notFound.button.back': 'Back to Home'
      };
      return translations[key] || key;
    }
  })
}));

// Mock the Lottie Player component
jest.mock('@lottiefiles/react-lottie-player', () => ({
  Player: () => <div data-testid="lottie-animation">Animation Mock</div>
}));

describe('NotFound Component', () => {
  const renderNotFound = () => {
    return render(
      <ChakraProvider>
        <BrowserRouter>
          <NotFound />
        </BrowserRouter>
      </ChakraProvider>
    );
  };

  it('renders without crashing', () => {
    renderNotFound();
  });

  it('displays the correct content', () => {
    renderNotFound();
    
    // Check if title is present
    expect(screen.getByText('Page Not Found')).toBeInTheDocument();
    
    // Check if description is present
    expect(screen.getByText('The page you are looking for does not exist')).toBeInTheDocument();
    
    // Check if back button is present
    expect(screen.getByText('Back to Home')).toBeInTheDocument();
    
    // Check if Lottie animation is rendered
    expect(screen.getByTestId('lottie-animation')).toBeInTheDocument();
  });

  it('contains a link to the dry-wash page', () => {
    renderNotFound();
    const backButton = screen.getByText('Back to Home');
    expect(backButton.closest('a')).toHaveAttribute('href', '/dry-wash');
  });
});