import { mount } from '@vue/test-utils'
import { describe, expect, it } from 'vitest'
import { defineComponent } from 'vue'
import StatCard from '@/components-v2/shared/StatCard.vue'

const CardStub = defineComponent({ name: 'CardStub', template: '<div class="card-stub"><slot name="content" /></div>' })
const IconStub = defineComponent({ name: 'Icon', props: ['name', 'size'], template: '<i class="icon-stub" :data-icon="name" />' })

const mountCard = (props: { icon: string; label: string; value: string | number; trend?: string; trendDir?: 'up' | 'down' }) =>
  mount(StatCard, { props, global: { stubs: { Card: CardStub, Icon: IconStub } } })

describe('StatCard', () => {
  it('renders label, value and the leading icon', () => {
    const w = mountCard({ icon: 'tabler-users', label: 'Vrijwilligers', value: 128 })

    expect(w.text()).toContain('Vrijwilligers')
    expect(w.text()).toContain('128')
    expect(w.get('.icon-stub').attributes('data-icon')).toBe('tabler-users')
  })

  it('shows the trend row with direction class only when trend is set', () => {
    expect(mountCard({ icon: 'tabler-users', label: 'X', value: 1 }).find('[data-trend]').exists()).toBe(false)

    const up = mountCard({ icon: 'tabler-users', label: 'X', value: 1, trend: '+12%', trendDir: 'up' })

    expect(up.get('[data-trend]').attributes('data-trend')).toBe('up')
    expect(up.text()).toContain('+12%')
  })
})