import { render, screen } from '@testing-library/react'
import { SafeHtml } from '../safe-html'

describe('SafeHtml', () => {
  it('renders safe HTML content', () => {
    render(<SafeHtml html="<p>Hello <strong>world</strong></p>" />)
    expect(screen.getByText(/Hello/)).toBeInTheDocument()
    expect(screen.getByText(/world/)).toBeInTheDocument()
  })

  it('strips script tags (XSS protection)', () => {
    const { container } = render(
      <SafeHtml html='<p>Safe</p><script>alert("xss")</script>' />
    )
    expect(container.querySelector('script')).toBeNull()
    expect(container.textContent).toContain('Safe')
  })

  it('strips event handlers (XSS protection)', () => {
    const { container } = render(
      <SafeHtml html='<img src="x" onerror="alert(1)">' />
    )
    const img = container.querySelector('img')
    expect(img?.getAttribute('onerror')).toBeNull()
  })

  it('preserves className prop', () => {
    const { container } = render(
      <SafeHtml html="<p>Test</p>" className="prose" />
    )
    expect(container.firstChild).toHaveAttribute('class', 'prose')
  })

  it('renders with custom tag via as prop', () => {
    const { container } = render(
      <SafeHtml html="<p>Test</p>" as="section" />
    )
    expect(container.querySelector('section')).not.toBeNull()
  })

  it('handles empty string', () => {
    const { container } = render(<SafeHtml html="" />)
    expect(container.firstChild).toBeInTheDocument()
  })
})