<template>
  <div class="relative">
    <div
      class="h-full w-full rounded-md rounded-tl-3xl rounded-br-3xl absolute top-2 left-2"
      :style="{
        background: lineBg
      }"
    >
      <div
        class="rounded rounded-tl-3xl rounded-br-3xl ml-1 mt-1 bg-white"
        style="width: calc(100% - 8px); height: calc(100% - 8px)"
      ></div>
    </div>
    <div
      class="z-1 break-inside-avoid mb-6 h-12 text-white text-lg flex justify-center items-center rounded-md rounded-tl-3xl rounded-br-3xl text-center relative tracking-widest font-bold"
      :style="{
        background: lineBg
      }"
    >
      <div class="h-8 w-8 mr-2">
        <slot name="icon"></slot>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from "vue";
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  bg: {
    type: Array,
    default: ["#587DFF", "#67DCFF"]
  }
});
const lineBg = computed(() => {
  if (Array.isArray(props.bg) && props.bg.length > 1) {
    return `linear-gradient(90deg, ${props.bg[0]} 0%, ${props.bg[1]} 100%)`;
  } else {
    return Array.isArray(props.bg)?.length ? props.bg[0] : props.bg;
  }
});
</script>

<style lang="scss" scoped></style>
