import { render, screen } from '@testing-library/react';
import { SectionPanel } from './SectionPanel';

const defaultProps = {
  number: '01',
  title: 'About',
  id: 'about',
  isActive: false,
  href: '/about',
  children: <p>Content here</p>,
};

describe('SectionPanel', () => {
  describe('collapsed state (isActive=false)', () => {
    it('renders a section element with the given id', () => {
      const { container } = render(<SectionPanel {...defaultProps} />);
      expect(container.querySelector('section#about')).toBeInTheDocument();
    });

    it('renders a link with number and title', () => {
      render(<SectionPanel {...defaultProps} />);
      expect(screen.getByRole('link', { name: /01.*About/i })).toBeInTheDocument();
    });

    it('link points to the correct href', () => {
      render(<SectionPanel {...defaultProps} />);
      expect(screen.getByRole('link', { name: /01.*About/i })).toHaveAttribute('href', '/about');
    });

    it('does not render children', () => {
      render(<SectionPanel {...defaultProps} />);
      expect(screen.queryByText('Content here')).not.toBeInTheDocument();
    });

    it('does not render a button', () => {
      render(<SectionPanel {...defaultProps} />);
      expect(screen.queryByRole('button')).not.toBeInTheDocument();
    });
  });

  describe('active state (isActive=true)', () => {
    const activeProps = { ...defaultProps, isActive: true };

    it('renders an h1 with number and title', () => {
      render(<SectionPanel {...activeProps} />);
      expect(screen.getByRole('heading', { level: 1, name: /01.*About/i })).toBeInTheDocument();
    });

    it('renders children', () => {
      render(<SectionPanel {...activeProps} />);
      expect(screen.getByText('Content here')).toBeInTheDocument();
    });

    it('does not render a link', () => {
      render(<SectionPanel {...activeProps} />);
      expect(screen.queryByRole('link')).not.toBeInTheDocument();
    });
  });
});