import { createRef } from 'react'
import { render, screen } from '@testing-library/react'
import { describe, expect, it } from 'vitest'

import Form from '@/components/common/Form'
import SectionTitle from '@/components/common/SectionTitle'
import SubsectionTitle from '@/components/common/SubsectionTitle'
import TextArea from '@/components/common/TextArea'

describe ('common typography and form components', () => {
  it ('renders Form children inside the standard container', () => {
    render (<Form><span>Content</span></Form>)

    expect (screen.getByText ('Content')).toBeInTheDocument ()
  })

  it ('renders SectionTitle as an h2', () => {
    render (<SectionTitle>Section</SectionTitle>)

    expect (screen.getByRole ('heading', { level: 2, name: 'Section' })).toBeInTheDocument ()
  })

  it ('renders SubsectionTitle as an h3', () => {
    render (<SubsectionTitle>Subsection</SubsectionTitle>)

    expect (screen.getByRole ('heading', { level: 3, name: 'Subsection' })).toBeInTheDocument ()
  })

  it ('forwards refs and props to TextArea', () => {
    const ref = createRef<HTMLTextAreaElement> ()

    render (<TextArea ref={ref} aria-label="Body" defaultValue="text"/>)

    expect (ref.current).toBe (screen.getByLabelText ('Body'))
    expect (screen.getByLabelText ('Body')).toHaveValue ('text')
  })
})