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

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

  it('handles text input', async () => {
    const user = userEvent.setup()
    render(<Input placeholder="Type here" />)
    const input = screen.getByPlaceholderText('Type here')
    await user.type(input, 'hello')
    expect(input).toHaveValue('hello')
  })

  it('renders with type password', () => {
    render(<Input type="password" placeholder="Password" />)
    expect(screen.getByPlaceholderText('Password')).toHaveAttribute('type', 'password')
  })

  it('renders as disabled', () => {
    render(<Input disabled placeholder="Disabled" />)
    expect(screen.getByPlaceholderText('Disabled')).toBeDisabled()
  })

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

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

  it('has correct displayName', () => {
    expect(Input.displayName).toBe('Input')
  })
})