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

describe('Card', () => {
  it('renders header, body, and footer slots', () => {
    render(<Card header="H" footer="F">Body</Card>)
    expect(screen.getByText('H')).toBeTruthy()
    expect(screen.getByText('Body')).toBeTruthy()
    expect(screen.getByText('F')).toBeTruthy()
  })

  it('omits header/footer when not provided (edge)', () => {
    const { container } = render(<Card>Only body</Card>)
    expect(screen.getByText('Only body')).toBeTruthy()
    expect(container.textContent).toBe('Only body')
  })

  it('renders no inline style (token-driven only)', () => {
    const { container } = render(<Card>x</Card>)
    expect(container.querySelector('[style]')).toBeNull()
  })

  it('uses semantic article/header/footer markup and stays axe-clean', async () => {
    const { container } = render(<Card header="H" footer="F">Body</Card>)
    expect(container.querySelector('article')).toBeTruthy()
    expect(container.querySelector('header')).toBeTruthy()
    expect(container.querySelector('footer')).toBeTruthy()
    await expect(axe(container)).resolves.toHaveNoViolations()
  })
})