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

describe('Input Component', () => {
    it('debería renderizar correctamente con label y placeholder', () => {
        render(<Input label="Nombre" placeholder="Escribe tu nombre" />);
        expect(screen.getByText('Nombre')).toBeDefined();
        expect(screen.getByPlaceholderText('Escribe tu nombre')).toBeDefined();
    });

    it('debería disparar el evento onChange al escribir', () => {
        const handleChange = vi.fn();
        render(<Input placeholder="Buscar..." onChange={handleChange} />);
        const input = screen.getByPlaceholderText('Buscar...');
        fireEvent.change(input, { target: { value: 'decido' } });
        expect(handleChange).toHaveBeenCalled();
    });

    it('debería mostrar un mensaje de error y aplicar clases de error si es provisto', () => {
        render(<Input placeholder="Correo" error="Correo inválido" />);
        expect(screen.getByText('Correo inválido')).toBeDefined();
        const input = screen.getByPlaceholderText('Correo');
        expect(input.className).toContain('border-error');
    });

    it('debería renderizar un icono si es provisto', () => {
        const mockIcon = <span data-testid="input-icon">🔍</span>;
        render(<Input placeholder="Buscar..." icon={mockIcon} />);
        expect(screen.getByTestId('input-icon')).toBeDefined();
        const input = screen.getByPlaceholderText('Buscar...');
        expect(input.className).toContain('pl-10');
    });
});