import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
import { BackLink } from '@/components/BackLink';

function renderBackLink(to: string, label: string) {
  return render(
    <MemoryRouter>
      <BackLink to={to}>{label}</BackLink>
    </MemoryRouter>,
  );
}

describe('BackLink', () => {
  it('renders children as link text', () => {
    renderBackLink('/engagements', 'Back to engagements');
    expect(screen.getByText('Back to engagements')).toBeInTheDocument();
  });

  it('renders as an anchor with the correct href', () => {
    renderBackLink('/engagements', 'Back to engagements');
    const link = screen.getByRole('link');
    expect(link).toHaveAttribute('href', '/engagements');
  });

  it('has no rounded-md, transition-*, or shadow-* (brutalism)', () => {
    renderBackLink('/engagements', 'Back');
    const link = screen.getByRole('link');
    expect(link).not.toHaveClass('rounded-md');
    expect(link.className).not.toMatch(/transition-/);
    expect(link.className).not.toMatch(/shadow-/);
  });

  it('contains the ArrowLeft icon (svg element)', () => {
    const { container } = renderBackLink('/engagements', 'Back');
    const svg = container.querySelector('svg');
    expect(svg).toBeInTheDocument();
  });
});