import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';

const MockRippleButton = ({ 
  children, 
  onClick, 
  disabled,
  variant,
  size 
}: { 
  children: React.ReactNode; 
  onClick?: () => void;
  disabled?: boolean;
  variant?: string;
  size?: string;
}) => {
  return (
    <button 
      onClick={onClick} 
      disabled={disabled}
      className={`${variant || 'default'} ${size || 'default'}`}
    >
      {children}
    </button>
  );
};

jest.mock('framer-motion', () => ({
  motion: {
    div: ({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) => (
      <div onClick={onClick}>{children}</div>
    ),
  },
  AnimatePresence: ({ children }: { children: React.ReactNode }) => <>{children}</>,
}));

describe('RippleButton', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  describe('Rendering', () => {
    it('should render button', () => {
      render(<MockRippleButton>Click me</MockRippleButton>);
      const button = screen.getByRole('button', { name: /click me/i });
      expect(button).toBeInTheDocument();
    });

    it('should render children', () => {
      render(<MockRippleButton>Test Button</MockRippleButton>);
      expect(screen.getByText('Test Button')).toBeInTheDocument();
    });

    it('should apply variant classes', () => {
      render(<MockRippleButton variant="secondary">Secondary</MockRippleButton>);
      const button = screen.getByRole('button');
      expect(button).toHaveClass('secondary');
    });

    it('should apply size classes', () => {
      render(<MockRippleButton size="lg">Large</MockRippleButton>);
      const button = screen.getByRole('button');
      expect(button).toHaveClass('lg');
    });
  });

  describe('Functionality', () => {
    it('should handle click events', () => {
      const handleClick = jest.fn();
      render(<MockRippleButton onClick={handleClick}>Click me</MockRippleButton>);
      
      const button = screen.getByRole('button');
      fireEvent.click(button);
      
      expect(handleClick).toHaveBeenCalled();
    });

    it('should be disabled when disabled prop is true', () => {
      render(<MockRippleButton disabled>Disabled</MockRippleButton>);
      const button = screen.getByRole('button');
      expect(button).toBeDisabled();
    });
  });

  describe('Accessibility', () => {
    it('should be focusable', () => {
      render(<MockRippleButton>Focus me</MockRippleButton>);
      const button = screen.getByRole('button');
      expect(button).not.toHaveAttribute('tabindex', '-1');
    });
  });
});