<template>
    <button :class="rootClasses" @click="useRipple($event, true)">
        <div :class="outerClasses">
            <div :class="innerClasses">
                <ml-spinner v-if="spinerPlace == 'prefix' && props.showSpiner" :color="props.spinerColor" :size="props.spinerSize" class="mx-2 fill-accent1" />
                <slot></slot>
                <ml-spinner v-if="spinerPlace == 'suffix' && props.showSpiner" :color="props.spinerColor" :size="props.spinerSize" class="mx-2 fill-accent1" />
            </div>
        </div>
    </button>
</template>

<script setup lang="ts">
import type { ButtonProps, PTAttribs } from './types';
import { twMerge } from 'tailwind-merge';

const props = withDefaults(defineProps<ButtonProps>(), {
    rounded: true,
    spinerSize: '6',
    spinerColor: 'accent1',
    spinerPlace: 'prefix'
});

const classes = ref({
    root: {
        class: `flex justify-center items-center disabled:opacity-60`
    },
    outer: {
        class: `bg-gradient-to-r from-accent1 to-accent2 p-[2px] w-full focus:outline-none ${props.rounded ? 'rounded-3xl' : ''}`
    },
    inner: {
        class: `justify-center flex items-center bg-white dark:bg-gradient-to-r px-5 py-2 w-full h-full font-semibold leading-[1.5] back ${props.rounded ? 'rounded-3xl' : ''}`
    }
} as PTAttribs);

const rootClasses = computed(() => twMerge(classes.value.root?.class, props.pt?.root?.class));
const innerClasses = computed(() => twMerge(classes.value.inner?.class, props.pt?.inner?.class));
const outerClasses = computed(() => twMerge(classes.value.outer?.class, props.pt?.outer?.class));
</script>
