import { customComponent } from "@/use/designComponent";
import { computed } from "vue";
import "./button.scss";

export default customComponent({

    name: "ms-button",
    props: {
        status: {type: String, default: "primary"},
        label: {type: String},
        size: {type: String, default: "normal"},
        dystyle: {type: Object, default: () => ({})}
    },

    setup(props, ctx) {

        const classes = computed(() => [
            'ms-button',
            `ms-button-status-${props.status}`,
            `ms-button-size-${props.size}`
        ]);
        
        return {
            render: () => (
                <button class={classes.value} style = {props.dystyle}>
                    {!ctx.slots.default ? props.label : ctx.slots.default()}
                </button>
            )
        }
    }
})