import React from 'react';
import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import { SuccessScreen } from '../SuccessScreen';

describe('SuccessScreen', () => {
  it('should render success title', () => {
    const { getByText } = render(<SuccessScreen />);
    expect(getByText('Enquiry submitted!')).toBeInTheDocument();
  });

  it('should render success message', () => {
    const { getByText } = render(<SuccessScreen />);
    expect(
      getByText(/One of our travel consultants will get back to you/)
    ).toBeInTheDocument();
  });

  it('should render close button', () => {
    const { getByText } = render(<SuccessScreen />);
    expect(getByText('Close')).toBeInTheDocument();
  });

  it('should call onClose when close button is clicked', () => {
    const onClose = jest.fn();
    const { getByText } = render(<SuccessScreen onClose={onClose} />);
    fireEvent.click(getByText('Close'));
    expect(onClose).toHaveBeenCalledTimes(1);
  });

  it('should call onClose when X button is clicked', () => {
    const onClose = jest.fn();
    const { getByLabelText } = render(<SuccessScreen onClose={onClose} />);
    fireEvent.click(getByLabelText('Close form'));
    expect(onClose).toHaveBeenCalledTimes(1);
  });

  it('should call onClose when overlay is clicked', () => {
    const onClose = jest.fn();
    const { getByTestId } = render(<SuccessScreen onClose={onClose} />);
    // Click on the form container should NOT trigger close (stopPropagation)
    fireEvent.click(getByTestId('travel-enquiry-form'));
    expect(onClose).not.toHaveBeenCalled();
  });

  it('should render the checkmark icon', () => {
    const { container } = render(<SuccessScreen />);
    expect(container.querySelector('svg')).toBeInTheDocument();
  });
});