import { describe, expect, it, vi } from 'vitest'

import { fireEvent, renderWithProviders, screen } from '../../../test/utils'

import DismissButton from './DismissButton'

describe('DismissButton', () => {
  it('uses the default label, invokes the handler, and stops propagation', () => {
    const onClick = vi.fn()
    const outerClick = vi.fn()
    renderWithProviders(
      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
      <div onClick={outerClick}>
        <DismissButton onClick={onClick} />
      </div>
    )

    fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
    expect(onClick).toHaveBeenCalledOnce()
    expect(outerClick).not.toHaveBeenCalled()
  })

  it('supports a custom label and inline styling', () => {
    const { rerender } = renderWithProviders(
      <DismissButton onClick={vi.fn()} ariaLabel="Remove file" />
    )
    const overlayClasses = screen.getByRole('button', {
      name: 'Remove file',
    }).className

    rerender(
      <DismissButton
        onClick={vi.fn()}
        ariaLabel="Remove file"
        variant="inline"
      />
    )
    const button = screen.getByRole('button', { name: 'Remove file' })
    expect(button).toHaveClass('hover:bg-white/25')
    expect(button.className).not.toBe(overlayClasses)
  })
})