import { render, screen, fireEvent } from '@testing-library/react';
import Contact from '@/app/components/Contact';
import '@testing-library/jest-dom';

// Mock the fetch function
global.fetch = jest.fn(() =>
  Promise.resolve({
    json: () => Promise.resolve({ message: 'Email sent' }),
  })
) as jest.Mock;

describe('Contact', () => {
  it('renders the contact form', () => {
    render(<Contact />);
    expect(screen.getByPlaceholderText('Name')).toBeInTheDocument();
    expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
    expect(screen.getByPlaceholderText('Message')).toBeInTheDocument();
  });

  it('submits the form', async () => {
    render(<Contact />);
    fireEvent.change(screen.getByPlaceholderText('Name'), { target: { value: 'John Doe' } });
    fireEvent.change(screen.getByPlaceholderText('Email'), { target: { value: 'john@example.com' } });
    fireEvent.change(screen.getByPlaceholderText('Message'), { target: { value: 'Hello!' } });
    fireEvent.click(screen.getByText('Send'));

    expect(await screen.findByText('Email sent')).toBeInTheDocument();
  });
});