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

describe('GlowCard', () => {
  it('renders children', () => {
    const { getByText } = render(<GlowCard><span>Hello</span></GlowCard>);
    expect(getByText('Hello')).toBeTruthy();
  });

  it('applies custom className', () => {
    const { container } = render(<GlowCard className="p-8">content</GlowCard>);
    expect((container.firstChild as HTMLElement).className).toContain('p-8');
  });

  it('has glow-card class for CSS glow effect', () => {
    const { container } = render(<GlowCard>content</GlowCard>);
    expect((container.firstChild as HTMLElement).className).toContain('glow-card');
  });

  it('sets CSS vars on mousemove', () => {
    const { container } = render(<GlowCard>content</GlowCard>);
    const card = container.firstChild as HTMLElement;

    card.getBoundingClientRect = vi.fn(() => ({
      left: 0, top: 0, width: 100, height: 100,
      right: 100, bottom: 100, x: 0, y: 0, toJSON: () => {},
    }));

    fireEvent.mouseMove(card, { clientX: 50, clientY: 50 });

    expect(card.style.getPropertyValue('--mouse-x')).toBe('50%');
    expect(card.style.getPropertyValue('--mouse-y')).toBe('50%');
  });
});
