<script setup>
import { ref, computed } from 'vue';

const props = defineProps({
  position: {
    type: String,
    default: 'bottom-left',
  },
});

const styles = computed(() => {
  switch (props.position) {
    case 'top-left':
      return {
        transform: 'rotate(90deg)',
        top: 0,
        left: 0,
        bottom: 'unset',
        right: 'unset',
      };
    case 'top-right':
      return {
        transform: 'rotate(180deg)',
        top: 0,
        left: 'unset',
        bottom: 'unset',
        right: 0,
      };
    case 'bottom-left':
      return {
        transform: 'rotate(0deg)',
        bottom: 0,
        left: 0,
        right: 'unset',
        top: 'unset',
      };
    case 'bottom-right':
      return {
        transform: 'rotate(-90deg)',
        top: 'unset',
        left: 'unset',
        bottom: 0,
        right: 0,
      };
  }
});
</script>

<template>
  <div class="corner" :style="styles"></div>
</template>

<style scoped>
.corner {
  position: absolute;
  width: 16px;
  height: 16px;
  border-left: 2px solid #0078e4;
  border-bottom: 2px solid #0078e4;
  z-index: 2;
}
</style>
