import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { MemoryRouter } from 'react-router-dom';
import CategoryCard from './CategoryCard';

const mockNavigate = vi.fn();
vi.mock('react-router-dom', async () => {
  const actual = await vi.importActual('react-router-dom');
  return { ...actual, useNavigate: () => mockNavigate };
});

describe('CategoryCard', () => {
  beforeEach(() => mockNavigate.mockClear());

  it('renders the title', () => {
    render(
      <MemoryRouter>
        <CategoryCard title="Bileklik" icon={<span>💎</span>} type="bileklik" />
      </MemoryRouter>,
    );
    expect(screen.getByText('Bileklik')).toBeInTheDocument();
  });

  it('renders the icon', () => {
    render(
      <MemoryRouter>
        <CategoryCard title="Kolye" icon={<span data-testid="icon">💎</span>} type="kolye" />
      </MemoryRouter>,
    );
    expect(screen.getByTestId('icon')).toBeInTheDocument();
  });

  it('navigates to /editor/:type on click', async () => {
    const user = userEvent.setup();
    render(
      <MemoryRouter>
        <CategoryCard title="Tesbih" icon={<span>📿</span>} type="tesbih" />
      </MemoryRouter>,
    );
    await user.click(screen.getByRole('button', { name: /tesbih tasarla/i }));
    expect(mockNavigate).toHaveBeenCalledWith('/editor/tesbih');
  });
});
