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

import type { PaginationListColumnType } from '@/types'
import PaginatedListCards from '@/components/paginated-list/PaginatedListCards'

const columns: PaginationListColumnType[] = [
  { field: 'name', label: 'نام' },
  { field: 'status', label: 'وضعیت' },
  { field: 'actions', label: 'عملیات' },
]

describe('PaginatedListCards', () => {
  it('renders row fields and actions as a mobile card', () => {
    render(
      <PaginatedListCards
        columns={columns}
        data={[{ id: '1', name: 'رویداد نمونه', status: 'فعال' }]}
        isLoading={false}
        onRenderCell={(item, key) => (key === 'actions' ? <button type="button">مشاهده</button> : String(item[String(key)] ?? '—'))}
      />
    )

    expect(screen.getByRole('article')).toBeInTheDocument()
    expect(screen.getByText('نام')).toBeInTheDocument()
    expect(screen.getByText('رویداد نمونه')).toBeInTheDocument()
    expect(screen.getByRole('button', { name: 'مشاهده' })).toBeInTheDocument()
  })

  it('renders the shared empty state when there are no rows', () => {
    render(
      <PaginatedListCards
        columns={columns}
        data={[]}
        isLoading={false}
        onRenderCell={() => null}
      />
    )

    expect(screen.getByText('اطلاعاتی برای نمایش وجود ندارد')).toBeInTheDocument()
  })
})