import { describe, it, expect } from 'vitest'
import { render, screen } from '@testing-library/react'
import ArticleGrid from '@/components/home/ArticleGrid'
import type { Article } from '@/lib/types'

const baseArticle: Article = {
  id: '1',
  title: 'Test Article',
  slug: 'test-article',
  status: 'published',
  content: null,
  excerpt: 'An excerpt.',
  featured_image: null,
  published_at: '2026-05-28T00:00:00Z',
  date_created: '2026-05-28T00:00:00Z',
  is_featured: false,
  seo_title: null,
  seo_description: null,
  category: { id: '1', name: 'Anime', slug: 'anime', description: null },
  tags: [],
}

const makeArticle = (overrides: Partial<Article>): Article => ({
  ...baseArticle,
  ...overrides,
})

describe('ArticleGrid', () => {
  it('returns null when articles array is empty', () => {
    const { container } = render(<ArticleGrid articles={[]} />)
    expect(container.innerHTML).toBe('')
  })

  it('renders the title when provided', () => {
    render(<ArticleGrid articles={[baseArticle]} title="Latest" />)
    expect(screen.getByText('Latest')).toBeInTheDocument()
  })

  it('does not render a title section when title is omitted', () => {
    render(<ArticleGrid articles={[baseArticle]} />)
    expect(screen.queryByText('Latest')).not.toBeInTheDocument()
  })

  it('renders the correct number of ArticleCards', () => {
    const articles = [
      makeArticle({ id: '1', title: 'Article 1' }),
      makeArticle({ id: '2', title: 'Article 2' }),
      makeArticle({ id: '3', title: 'Article 3' }),
    ]
    render(<ArticleGrid articles={articles} />)
    expect(screen.getByText('Article 1')).toBeInTheDocument()
    expect(screen.getByText('Article 2')).toBeInTheDocument()
    expect(screen.getByText('Article 3')).toBeInTheDocument()
  })

  it('renders a section element with max-width class', () => {
    const { container } = render(<ArticleGrid articles={[baseArticle]} title="Latest" />)
    const section = container.querySelector('section')
    expect(section).toHaveClass('max-w-[1200px]')
  })
})