<script setup lang="ts">
import { omit } from 'radash'

// const theme
interface ComponentProps {
  block?: boolean
  color?: string
  size?: 'lg' | 'md' | 'sm'
}
const props = withDefaults(
  defineProps<{ customClass?: string; skew?: boolean } & ComponentProps>(),
  { color: 'primary' },
)
const themeVars = { primary: '--evo-theme-primary' }
const btnThemeClass = { primary: 'before:bg-[--evo-theme-primary] after:bg-[--evo-theme-primary]' }

// const color = computed(() => (theme[props.color] ? theme[props.color] : props.color || 'black'))
const buttonProps = computed(() => omit(props, ['color']))
const btnClass = computed(
  () => `${btnThemeClass[props.color] || `before:bg-[--color] after:bg-[--color]`}`,
)
const height = computed(() => ({ lg: '2.75rem', md: '2.1875rem' })[props.size] || '2.75rem')
</script>
<template>
  <button
    class="left-skew relative bg-transparent hover:bg-transparent h-[--evo-btn-height]!"
    :class="`${btnClass} ${{ md: 'pl-7! pr-3.5!' }[size] || ''}`"
    :style="{ '--color': color, '--evo-btn-height': height }"
    :block="block"
  >
    <div
      class="w-full h-full flex items-center justify-center relative z-1 c-white"
      :class="`${{ md: 'text-sm' }[size] || ''}`"
    >
      <slot></slot>
    </div>
  </button>
</template>
<style lang="scss">
/* 左侧倾斜的按钮 */

.left-skew {
  //   @apply bg-blue-500 text-white px-6 rounded text-center relative;
  //   clip-path: polygon(12% 0%, 100% 0%, 100% 100%, 0% 100%);
  //   transition: all 0.3s ease;
  @apply border-black  border-1 h-11 pl-8 pr-4.75 opacity-85 box-border border-red;
  &::before {
    @apply content-empty absolute top-0 right-5 bottom-0 left-1.25 skew-x-154 rounded-tl-1.25 rounded-bl-3.75;
  }
  &::after {
    @apply content-empty absolute top-0 right-0 bottom-0 left-6 w-auto h-auto rounded-2.5 b-none z-0 transform-none;
  }
  &:active {
    // @apply opacity-75;
  }
}
</style>
