import loglevel from 'loglevel'
import { ComponentModel } from './cykLang'
import { ref } from 'vue'
import { componentModelParameter } from './cykReact'
const logger = loglevel.getLogger('cykBanner.ts')
logger.setLevel('debug')

export function useCykBanner(props: {componentArg: ComponentModel | undefined}) {

    const isLoading = ref(true)

    const message = componentModelParameter<string>(props.componentArg, "message", '')
    const level = componentModelParameter<string>(props.componentArg, "level", '')

    const doLoading = async () => {
        try {
            await props.componentArg?.interpolateAttributes()
        }
        catch (err) {
            logger.error(err)
        }
        finally {
            isLoading.value = false
        }
    }

    doLoading()
    
    return { isLoading, message, level }
}