import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import PillStatus from '../src/canonical/PillStatus.vue'
import PillCounter from '../src/canonical/PillCounter.vue'

describe('PillStatus', () => {
  it('renders with default Inactive variant', () => {
    const wrapper = mount(PillStatus)
    expect(wrapper.text()).toContain('Inactive')
    expect(wrapper.attributes('data-figma-component')).toBe('Pill/Status')
    expect(wrapper.attributes('data-figma-status')).toBe('Inactive')
  })
  it('renders Live variant with brand bg', () => {
    const wrapper = mount(PillStatus, { props: { status: 'Live' } })
    expect(wrapper.attributes('data-figma-status')).toBe('Live')
    expect(wrapper.html()).toContain('--pill-bg: var(--msg-bg-brand)')
  })
  it('Preview + Analyzing both map to blue', () => {
    const preview = mount(PillStatus, { props: { status: 'Preview' } })
    const analyzing = mount(PillStatus, { props: { status: 'Analyzing' } })
    expect(preview.html()).toContain('--pill-bg: var(--msg-bg-blue)')
    expect(analyzing.html()).toContain('--pill-bg: var(--msg-bg-blue)')
  })
  it('slot content overrides default label', () => {
    const wrapper = mount(PillStatus, { props: { status: 'Live' }, slots: { default: 'Custom Label' } })
    expect(wrapper.text()).toContain('Custom Label')
  })
})

describe('PillCounter', () => {
  it('renders neutral by default', () => {
    const wrapper = mount(PillCounter, { slots: { default: '42' } })
    expect(wrapper.text()).toBe('42')
    expect(wrapper.attributes('data-figma-component')).toBe('Pill/Counter')
    expect(wrapper.attributes('data-figma-kind')).toBe('neutral')
  })
  it('success → brand bg', () => {
    const wrapper = mount(PillCounter, { props: { kind: 'success' }, slots: { default: '3' } })
    expect(wrapper.html()).toContain('--pill-bg: var(--msg-bg-brand)')
  })
  it('warning → red bg', () => {
    const wrapper = mount(PillCounter, { props: { kind: 'warning' }, slots: { default: '!' } })
    expect(wrapper.html()).toContain('--pill-bg: var(--msg-bg-red)')
  })
  it('info → blue bg', () => {
    const wrapper = mount(PillCounter, { props: { kind: 'info' }, slots: { default: 'i' } })
    expect(wrapper.html()).toContain('--pill-bg: var(--msg-bg-blue)')
  })
})