import { render, screen } from '@testing-library/react'
import { describe, it, expect } from 'vitest'
import { MemoryRouter } from 'react-router'
import Home from './home'
import type { Route } from './+types/home'

describe('Home component', () => {
  it('should render task management interface', () => {
    const mockComponentProps: Route.ComponentProps = {
      loaderData: { tasks: [] },
      params: {},
      matches: [
        {
          id: 'root',
          params: {},
          pathname: '/',
          data: undefined,
          loaderData: undefined,
          handle: undefined,
        },
        {
          id: 'routes/home',
          params: {},
          pathname: '/',
          data: { tasks: [] },
          loaderData: { tasks: [] },
          handle: undefined,
        },
      ],
    }
    render(
      <MemoryRouter>
        <Home {...mockComponentProps} />
      </MemoryRouter>
    )
    expect(
      screen.getByRole('heading', { level: 1, name: /Dashboard/i })
    ).toBeInTheDocument()

    // TaskList component should be rendered with empty state
    expect(screen.getByText(/No tasks found/i)).toBeInTheDocument()
  })
})