import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import { BaseModal } from '../../components/base/BaseModal';

describe('BaseModal', () => {
  const defaultProps = {
    isOpen: true,
    onClose: jest.fn(),
    title: 'Test Modal',
    children: <div>Modal Content</div>,
  };

  it('should render modal when open', () => {
    render(<BaseModal {...defaultProps} />);

    expect(screen.getByText('Test Modal')).toBeInTheDocument();
    expect(screen.getByText('Modal Content')).toBeInTheDocument();
  });

  it('should not render modal when closed', () => {
    render(<BaseModal {...defaultProps} isOpen={false} />);

    expect(screen.queryByText('Test Modal')).not.toBeInTheDocument();
    expect(screen.queryByText('Modal Content')).not.toBeInTheDocument();
  });

  it('should render with custom maxWidth and maxHeight', () => {
    render(
      <BaseModal 
        {...defaultProps} 
        maxWidth="sm:max-w-[800px]" 
        maxHeight="max-h-[80vh]" 
      />
    );

    const modalContent = screen.getByTestId('modal-content');
    expect(modalContent).toHaveClass('sm:max-w-[800px]');
    expect(modalContent).toHaveClass('max-h-[80vh]');
  });

  it('should render with description when provided', () => {
    render(
      <BaseModal 
        {...defaultProps} 
        description="Test description" 
      />
    );

    expect(screen.getByText('Test description')).toBeInTheDocument();
  });

  it('should render footer when provided', () => {
    const footer = <button>Save</button>;
    render(<BaseModal {...defaultProps} footer={footer} />);

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