import { mount } from '@vue/test-utils'
import { describe, expect, it, vi } from 'vitest'
import { computed } from 'vue'
import Logo from '../Logo.vue'

// Mock the useAuth composable
vi.mock('@/composables/useAuth', () => ({
  useAuth: () => ({
    config: computed(() => ({ appName: 'TestApp' })),
  }),
}))

describe('logo', () => {
  it('renders the first letter of the app name', () => {
    const wrapper = mount(Logo)
    expect(wrapper.text()).toContain('T')
  })

  it('renders the app name when showText is true', () => {
    const wrapper = mount(Logo, {
      props: { showText: true },
    })
    expect(wrapper.text()).toContain('TestApp')
  })

  it('does not render the app name when showText is false', () => {
    const wrapper = mount(Logo, {
      props: { showText: false },
    })
    expect(wrapper.text()).not.toContain('TestApp')
  })

  it('applies correct size classes for sm', () => {
    const wrapper = mount(Logo, {
      props: { size: 'sm' },
    })
    expect(wrapper.html()).toContain('size-8')
  })

  it('applies correct size classes for lg', () => {
    const wrapper = mount(Logo, {
      props: { size: 'lg' },
    })
    expect(wrapper.html()).toContain('size-16')
  })
})