import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { Modal, ModalHeader, ModalBody, ModalFooter } from './Modal';
import { CreditCard } from 'lucide-react';

beforeEach(() => {
  // The Modal locks body scroll while open; reset between tests
  document.body.style.overflow = '';
});

describe('Modal', () => {
  it('renders nothing when open=false', () => {
    const { container } = render(
      <Modal open={false} onClose={() => {}} title="Should not appear">
        <p>Hidden</p>
      </Modal>
    );
    expect(container.firstChild).toBeNull();
  });

  it('renders title and body content when open=true', () => {
    render(
      <Modal open={true} onClose={() => {}} title="Edit student">
        <p>Body text here</p>
      </Modal>
    );
    expect(screen.getByText('Edit student')).toBeTruthy();
    expect(screen.getByText('Body text here')).toBeTruthy();
    // Close button is labelled "Close"
    expect(screen.getByLabelText('Close')).toBeTruthy();
  });

  it('clicking the X button calls onClose', () => {
    const onClose = vi.fn();
    render(
      <Modal open={true} onClose={onClose} title="X">
        <p>Body</p>
      </Modal>
    );
    fireEvent.click(screen.getByLabelText('Close'));
    expect(onClose).toHaveBeenCalledTimes(1);
  });
});

describe('ModalHeader', () => {
  it('renders icon and title when provided', () => {
    render(<ModalHeader title="Pay fees" icon={CreditCard} onClose={() => {}} />);
    expect(screen.getByText('Pay fees')).toBeTruthy();
    // The icon is rendered as an SVG via lucide-react
    expect(screen.getByLabelText('Close')).toBeTruthy();
  });
});
