import React from 'react';
import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { Button } from '@/components/ui/Button';

describe('Button', () => {
  it('renders primary variant by default', () => {
    render(<Button>Klick mich</Button>);
    const btn = screen.getByRole('button', { name: 'Klick mich' });
    expect(btn).toBeInTheDocument();
    expect(btn.className).toContain('bg-primary-600');
  });

  it('renders secondary variant', () => {
    render(<Button variant="secondary">Sekundär</Button>);
    const btn = screen.getByRole('button', { name: 'Sekundär' });
    expect(btn.className).toContain('bg-secondary-200');
  });

  it('renders danger variant', () => {
    render(<Button variant="danger">Löschen</Button>);
    const btn = screen.getByRole('button', { name: 'Löschen' });
    expect(btn.className).toContain('bg-danger-600');
  });

  it('renders ghost variant', () => {
    render(<Button variant="ghost">Geist</Button>);
    const btn = screen.getByRole('button', { name: 'Geist' });
    expect(btn.className).toContain('bg-transparent');
  });

  it('calls onClick when clicked', async () => {
    const onClick = vi.fn();
    render(<Button onClick={onClick}>Klick</Button>);
    await userEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('shows loading spinner when isLoading', () => {
    render(<Button isLoading>Laden</Button>);
    const btn = screen.getByRole('button');
    expect(btn).toBeDisabled();
    expect(btn).toHaveAttribute('aria-busy', 'true');
  });

  it('has min-h-touch for 44px touch target', () => {
    render(<Button>Test</Button>);
    expect(screen.getByRole('button').className).toContain('min-h-touch');
  });

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

  it('renders with full width when fullWidth', () => {
    render(<Button fullWidth>Voll</Button>);
    expect(screen.getByRole('button').className).toContain('w-full');
  });
});
