import { UserCircleIcon } from '@heroicons/react/24/outline';
import { fireEvent, screen } from '@testing-library/react';
import { Route, Routes } from 'react-router-dom';
import { describe, expect, it, vi } from 'vitest';
import { SidebarNavItem } from '../../src/components/SidebarNavItem';
import { renderWithRouter } from '../helpers/renderWithRouter';

describe('SidebarNavItem', () => {
    it('renders active style and collapsed label behavior', () => {
        renderWithRouter(
            <Routes>
                <Route
                    path="/users"
                    element={<SidebarNavItem to="/users" label="Users" icon={UserCircleIcon} collapsed />}
                />
            </Routes>,
            { route: '/users' },
        );

        const link = screen.getByRole('link', { name: 'Users' });
        expect(link.className).toContain('ui-accent-active');
        expect(link.className).toContain('mx-auto');
        expect(screen.getByText('Users').className).toContain('lg:hidden');
    });

    it('renders inactive style and triggers onClick', () => {
        const onClick = vi.fn();
        renderWithRouter(
            <Routes>
                <Route path="/users" element={<div>Users page</div>} />
                <Route
                    path="/profile"
                    element={
                        <SidebarNavItem
                            to="/users"
                            label="Users"
                            icon={UserCircleIcon}
                            collapsed={false}
                            onClick={onClick}
                        />
                    }
                />
            </Routes>,
            { route: '/profile' },
        );

        const link = screen.getByRole('link', { name: 'Users' });
        expect(link.className).toContain('hover:bg-zinc-500/15');
        expect(link.className).toContain('lg:w-full');
        expect(screen.getByText('Users').className).toContain('truncate');

        fireEvent.click(link);
        expect(onClick).toHaveBeenCalledTimes(1);
    });
});