import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { BrowserRouter } from 'react-router-dom';
import HelpButton from '../HelpButton';

// Mock react-i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string, defaultValue?: string) => defaultValue || key,
  }),
}));

describe('HelpButton', () => {
  const renderHelpButton = (props: { helpPath: string; className?: string }) => {
    return render(
      <BrowserRouter>
        <HelpButton {...props} />
      </BrowserRouter>
    );
  };

  it('renders help link', () => {
    renderHelpButton({ helpPath: '/help/dashboard' });
    const link = screen.getByRole('link');
    expect(link).toBeInTheDocument();
  });

  it('has correct href', () => {
    renderHelpButton({ helpPath: '/help/dashboard' });
    const link = screen.getByRole('link');
    expect(link).toHaveAttribute('href', '/help/dashboard');
  });

  it('renders help text', () => {
    renderHelpButton({ helpPath: '/help/test' });
    expect(screen.getByText('Help')).toBeInTheDocument();
  });

  it('has title attribute', () => {
    renderHelpButton({ helpPath: '/help/test' });
    const link = screen.getByRole('link');
    expect(link).toHaveAttribute('title', 'Help');
  });

  it('applies custom className', () => {
    renderHelpButton({ helpPath: '/help/test', className: 'custom-class' });
    const link = screen.getByRole('link');
    expect(link).toHaveClass('custom-class');
  });

  it('has default styles', () => {
    renderHelpButton({ helpPath: '/help/test' });
    const link = screen.getByRole('link');
    expect(link).toHaveClass('inline-flex');
    expect(link).toHaveClass('items-center');
  });
});
