import { render, screen } from '../test-utils';
import TableHeader, { TableHeaderProps } from './TableHeader';

describe('TableHeader Component', () => {
  const renderComponent = (props: Partial<TableHeaderProps> = {}) => {
    const defaultProps = {
      header: '',
    } satisfies TableHeaderProps;
    return render(<TableHeader {...defaultProps} {...props} />);
  };

  it('should render header', () => {
    const { container } = renderComponent();
    expect(container).toBeInTheDocument();
  });

  it('should render header text when provided', () => {
    const headerText = 'Test Header';
    renderComponent({ header: headerText });
    expect(screen.getByText(headerText)).toBeInTheDocument();
  });

  it('should apply custom className', () => {
    const className = 'custom-class';
    renderComponent({ className });
    expect(screen.getByRole('columnheader')).toHaveClass(className);
  });

  it('should align text to the right when alignment is set to right', () => {
    renderComponent({ alignment: 'right' });
    expect(screen.getByRole('columnheader')).toHaveClass('np-table-header--right');
  });

  it("should show error class when status equals 'error'", () => {
    renderComponent({ status: 'error' });
    expect(screen.getByRole('columnheader')).toHaveClass('np-table-header--error');
  });

  it('should render empty header content when header is not provided', () => {
    renderComponent();
    expect(screen.getByTestId('np-table-empty-header').innerHTML).toBe('&nbsp;');
  });

  it('should render header with error status when status is `error`', () => {
    const headerText = 'Test Header';
    renderComponent({ header: headerText, status: 'error' });
    expect(screen.getByText(headerText)).toHaveClass('np-table-content--error');
    expect(screen.getByTestId('alert-icon')).toBeInTheDocument();
  });
});