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

import { ContentCard } from './ContentCard'

vi.mock('antd', () => ({
  Card: ({
    children,
    className,
    style,
    title,
  }: {
    children?: React.ReactNode
    className?: string
    style?: React.CSSProperties
    title?: React.ReactNode
  }) => (
    <div data-testid="card" data-class={className} style={style}>
      {title && <div data-testid="card-title">{title}</div>}
      {children}
    </div>
  ),
}))

describe('ContentCard', () => {
  it('renders children content', () => {
    render(
      <ContentCard>
        <div>card content</div>
      </ContentCard>,
    )

    expect(screen.getByText('card content')).toBeInTheDocument()
  })

  it('applies custom className', () => {
    render(
      <ContentCard className="custom-class">
        <div>content</div>
      </ContentCard>,
    )

    expect(screen.getByTestId('card')).toHaveAttribute('data-class', expect.stringContaining('custom-class'))
  })

  it('applies custom style', () => {
    const customStyle = { marginTop: '20px' }
    render(
      <ContentCard style={customStyle}>
        <div>content</div>
      </ContentCard>,
    )

    expect(screen.getByTestId('card')).toHaveStyle({ marginTop: '20px' })
  })

  it('renders with title', () => {
    render(
      <ContentCard title="Card Title">
        <div>content</div>
      </ContentCard>,
    )

    expect(screen.getByTestId('card-title')).toHaveTextContent('Card Title')
  })
})
