import { ref } from 'vue'
import { getConstByKey } from '@/api/const'

export function useBanners() {
    const banners = ref([])
    const loading = ref(false)

    const loadBanners = async () => {
        try {
            loading.value = true
            const response = await getConstByKey('header_banner')
            if (!response) return

            let list = []
            if (typeof response === 'string') {
                list = JSON.parse(response)
            } else if (typeof response === 'object' && !Array.isArray(response) && 'value' in response) {
                list = typeof response.value === 'string' ? JSON.parse(response.value) : response.value
            } else if (Array.isArray(response) && response.length > 0) {
                const first = response[0]
                if (first.value) {
                    list = typeof first.value === 'string' ? JSON.parse(first.value) : first.value
                } else if (first.icon) {
                    list = response
                }
            }

            banners.value = Array.isArray(list) ? list.filter(b => b.show === true) : []
        } catch (error) {
            console.error('Error loading banners:', error)
        } finally {
            loading.value = false
        }
    }

    return { banners, loading, loadBanners }
}