import { describe, it, expect } from 'vitest'
import { h } from 'vue'
import { mount } from '@vue/test-utils'
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../src/lib'

describe('Card', () => {
  it('renders header, title, description, content, and footer together', () => {
    const wrapper = mount(Card, {
      slots: {
        default: () => [
          h(CardHeader, undefined, {
            default: () => [
              h(CardTitle, undefined, { default: () => 'Elysium' }),
              h(CardDescription, undefined, { default: () => 'The blessed fields' }),
            ],
          }),
          h(CardContent, undefined, { default: () => 'A resting place for the virtuous.' }),
          h(CardFooter, undefined, { default: () => 'Enter' }),
        ],
      },
    })
    expect(wrapper.text()).toContain('Elysium')
    expect(wrapper.text()).toContain('The blessed fields')
    expect(wrapper.text()).toContain('A resting place for the virtuous.')
    expect(wrapper.text()).toContain('Enter')
  })

  it('exposes a data-slot attribute for styling hooks', () => {
    const wrapper = mount(Card)
    expect(wrapper.attributes('data-slot')).toBe('card')
  })

  it('resolves size classes through cva instead of data-[size=] selectors', () => {
    const wrapper = mount(Card, { props: { size: 'sm' } })
    const classes = wrapper.classes()
    expect(classes).toContain('gap-3')
    expect(classes).toContain('py-3')
    expect(classes.some((c) => c.includes('data-[size='))).toBe(false)
  })
})