import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it, vi } from 'vitest';
import { Input } from '../input';

describe('Input', () => {
  it('renders an input element', () => {
    render(<Input placeholder="Enter text" />);
    expect(screen.getByPlaceholderText('Enter text')).toBeInTheDocument();
  });

  it('accepts and displays typed value', async () => {
    render(<Input placeholder="Type here" />);
    const input = screen.getByPlaceholderText('Type here');
    await userEvent.type(input, 'Hello');
    expect(input).toHaveValue('Hello');
  });

  it('applies type attribute', () => {
    render(<Input type="email" placeholder="Email" />);
    expect(screen.getByPlaceholderText('Email')).toHaveAttribute('type', 'email');
  });

  it('is disabled when disabled prop is set', () => {
    render(<Input disabled placeholder="Disabled" />);
    expect(screen.getByPlaceholderText('Disabled')).toBeDisabled();
  });

  it('calls onChange handler', async () => {
    const onChange = vi.fn();
    render(<Input onChange={onChange} placeholder="Input" />);
    await userEvent.type(screen.getByPlaceholderText('Input'), 'a');
    expect(onChange).toHaveBeenCalled();
  });

  it('applies custom className', () => {
    render(<Input className="my-class" placeholder="Custom" />);
    expect(screen.getByPlaceholderText('Custom')).toHaveClass('my-class');
  });
});