<template>
  <div>
    <div
      class="q-pa-none"
      :class="typeClass"
      :style="{ backgroundColor: bgColor ? getColorWithOpacity(color, bgColor) : getColorWithOpacity(color) }"
      >
      <slot/>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import { getColorWithOpacity } from 'utils/colors'

  const props = defineProps<{
    type: string
    color: string
    bgColor?: string
  }>()

  const typeClass = computed(() => {
    switch (props.type) {
      case 'fab': return 'q-btn--fab q-btn--rounded'
      case 'round': return 'q-btn--rounded'
      case 'rounded': return 'q-btn--rounded'
      default: return ''
    }
  })
</script>

<style scoped>
</style>
