import { Namespace } from "../../utils/namespace";

const namespace = Namespace.Create('empty')

export default {
    name: namespace.name,
    props:{
        img:{
            type: String,
            required: true
        },
        desc:{
            type: String
        }
    },
    computed:{
        cls(){
            return namespace.derive()
        },
        imgCls(){
            return namespace.derive('img')
        },
        descCls(){
            return namespace.derive('desc')
        },
        slotCls(){
            return namespace.derive('slot')
        }

    },
    render(){
        return (
            <div class={this.cls}>
                <img class={this.imgCls} src={this.img} />
                <div class={this.descCls}>
                   { this.desc }
                </div>
                <div class={this.slotCls}>
                    { this.$slots.default }
                </div>
            </div>
        )
    }
}