import { render, fireEvent } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { TarjetaSpotlight } from '../TarjetaSpotlight';

describe('<TarjetaSpotlight />', () => {
  it('renders its children', () => {
    const { getByText } = render(
      <TarjetaSpotlight>
        <p>Contenido de la tarjeta</p>
      </TarjetaSpotlight>,
    );
    expect(getByText('Contenido de la tarjeta')).toBeInTheDocument();
  });

  it('disables the glow for reduced-motion users via a motion-reduce guard', () => {
    const { container } = render(<TarjetaSpotlight>hola</TarjetaSpotlight>);
    expect(container.firstElementChild?.className).toContain('motion-reduce:before:hidden');
  });

  it('tracks the cursor position as CSS custom properties on mouse move', () => {
    const { container } = render(<TarjetaSpotlight>hola</TarjetaSpotlight>);
    const card = container.firstElementChild as HTMLDivElement;
    fireEvent.mouseMove(card, { clientX: 40, clientY: 20 });
    expect(card.style.getPropertyValue('--spot-x')).toMatch(/px$/);
    expect(card.style.getPropertyValue('--spot-y')).toMatch(/px$/);
  });

  it('accepts a custom spotlight colour', () => {
    const { container } = render(
      <TarjetaSpotlight spotlightColor="rgba(0,0,0,0.5)">hola</TarjetaSpotlight>,
    );
    const card = container.firstElementChild as HTMLDivElement;
    expect(card.style.getPropertyValue('--spot-color')).toBe('rgba(0,0,0,0.5)');
  });
});