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

describe('Button Component', () => {
    it('debería renderizar correctamente con hijos', () => {
        render(<Button>Enviar</Button>);
        const btn = screen.getByRole('button');
        expect(btn).toBeDefined();
        expect(screen.getByText('Enviar')).toBeDefined();
    });

    it('debería aplicar las clases CSS según las propiedades variant y size', () => {
        const { rerender } = render(<Button variant="danger" size="lg">Eliminar</Button>);
        let btn = screen.getByRole('button');
        expect(btn.className).toContain('bg-error');
        expect(btn.className).toContain('px-8');

        rerender(<Button variant="secondary" size="sm">Cancelar</Button>);
        btn = screen.getByRole('button');
        expect(btn.className).toContain('bg-surface-hover');
        expect(btn.className).toContain('px-4');
    });

    it('debería soportar la propiedad fullWidth', () => {
        const { rerender } = render(<Button fullWidth>Ancho completo</Button>);
        let btn = screen.getByRole('button');
        expect(btn.className).toContain('w-full');

        rerender(<Button fullWidth={false}>Ancho automático</Button>);
        btn = screen.getByRole('button');
        expect(btn.className).toContain('w-fit');
    });
});