<script setup>
import Icon from './Icon.vue';
import Corner from './Corner.vue';
const props = defineProps({
  title: {
    type: String,
    default: 'Default title',
  },
  icon: {
    type: String,
    default: 'icon',
  },
  corner: {
    type: Array,
    default: ['tl', 'tr', 'bl', 'br'], //'trbl', // top right bottom left
  },
  cubeCorner: {
    type: String,
    default: 'bl',
    validator: (value, props) => {
      return ['bl', 'br'].includes(value);
    },
  },
});
</script>

<template>
  <div class="container-border">
    <Corner
      v-if="corner.indexOf('tl') !== -1"
      position="top-left"
      key="top-left"
    />
    <Corner
      v-if="corner.indexOf('tr') !== -1"
      position="top-right"
      key="top-right"
    />
    <Corner
      v-if="corner.indexOf('bl') !== -1"
      position="bottom-left"
      key="bottom-left"
    />
    <Corner
      v-if="corner.indexOf('br') !== -1"
      position="bottom-right"
      key="bottom-right"
    />

    <div class="container">
      <div class="cube" :class="[`cube-${cubeCorner}`]"></div>
      <div class="container-header">
        <Icon :name="icon" />
        <span>{{ title }}</span>
      </div>
      <div class="container-body">
        <slot />
      </div>
    </div>
  </div>
</template>

<style scoped>
.container-border {
  position: relative;
  display: flex;
}

.cube {
  width: 26px;
  height: 26px;
  background: #1f8fff;
  position: absolute;
  z-index: 1;
}

.cube-bl {
  transform: rotate(45deg);
  bottom: -13px;
  left: -13px;
}

.cube-br {
  transform: rotate(45deg);
  bottom: -13px;
  right: -13px;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.container-header {
  background: #006acd66;
  backdrop-filter: blur(2px);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
}

.container-body {
  background: #ffffff11;
  backdrop-filter: blur(2px);
  flex: 1;
  padding: 20px;
}
</style>
