"use client";
import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import React from 'react';
import Tooltip from '../Tooltip';
import { useSettingsStore } from '../../lib/store/settingsStore';

vi.mock('../../lib/store/settingsStore', () => ({
  useSettingsStore: vi.fn(),
}));

describe('Tooltip', () => {
  it('should render children correctly', () => {
    vi.mocked(useSettingsStore).mockReturnValue({});

    render(
      <Tooltip termKey="mussel">
        <span>Mussel Term</span>
      </Tooltip>
    );

    expect(screen.getByText('Mussel Term')).toBeInTheDocument();
  });

  it('should display tooltip definition on hover', async () => {
    const mockTerms = {
      mussel: {
        key: 'mussel',
        term: 'Green Mussel',
        definition: 'Scientific definition of NZ green mussel',
        wikiId: 'green-mussel',
      },
    };
    vi.mocked(useSettingsStore).mockReturnValue(mockTerms);

    render(
      <Tooltip termKey="mussel">
        <span>Hover Me</span>
      </Tooltip>
    );

    const trigger = screen.getByText('Hover Me');
    fireEvent.mouseEnter(trigger);

    expect(screen.getByText('Green Mussel')).toBeInTheDocument();
    expect(screen.getByText('Scientific definition of NZ green mussel')).toBeInTheDocument();

    fireEvent.mouseLeave(trigger);
    // Tooltip should exit (though animations might delay actual removal, under standard RTL fireEvent it updates state immediately)
  });
});