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

describe('Button', () => {
    it('should render button with text', () => {
        render(<Button>Click me</Button>);
        expect(screen.getByRole('button', { name: 'Click me' })).toBeInTheDocument();
    });

    it('should render with default variant', () => {
        render(<Button>Default</Button>);
        const button = screen.getByRole('button');
        expect(button).toBeInTheDocument();
        expect(button).toHaveAttribute('data-slot', 'button');
    });

    it('should render with different variants', () => {
        const { rerender } = render(<Button variant="destructive">Destructive</Button>);
        expect(screen.getByRole('button')).toBeInTheDocument();

        rerender(<Button variant="outline">Outline</Button>);
        expect(screen.getByRole('button')).toBeInTheDocument();

        rerender(<Button variant="ghost">Ghost</Button>);
        expect(screen.getByRole('button')).toBeInTheDocument();

        rerender(<Button variant="link">Link</Button>);
        expect(screen.getByRole('button')).toBeInTheDocument();
    });

    it('should render with different sizes', () => {
        const { rerender } = render(<Button size="sm">Small</Button>);
        expect(screen.getByRole('button')).toBeInTheDocument();

        rerender(<Button size="lg">Large</Button>);
        expect(screen.getByRole('button')).toBeInTheDocument();

        rerender(<Button size="icon">Icon</Button>);
        expect(screen.getByRole('button')).toBeInTheDocument();
    });

    it('should render as child when asChild is true', () => {
        render(
            <Button asChild>
                <a href="/test">Link Button</a>
            </Button>
        );
        expect(screen.getByRole('link', { name: 'Link Button' })).toBeInTheDocument();
    });

    it('should apply custom className', () => {
        render(<Button className="custom-class">Custom</Button>);
        expect(screen.getByRole('button')).toHaveClass('custom-class');
    });

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

    it('should handle click events', () => {
        const handleClick = vi.fn();
        render(<Button onClick={handleClick}>Click me</Button>);
        
        screen.getByRole('button').click();
        expect(handleClick).toHaveBeenCalledTimes(1);
    });
});