<script setup lang="ts">
import Spinner from "@/components/spinner/Spinner.vue";
import { IProps } from "./props";

withDefaults(defineProps<Omit<IProps, "modelValue">>(), {
  size: "lg",
  loading: false,
});
</script>

<template>
  <div class="modal-content" :class="`modal-${size}`">
    <div v-if="loading" class="container-loading">
      <div class="loading">
        <Spinner size="md" />
      </div>
    </div>

    <slot />
  </div>
</template>

<style scoped lang="scss">
.modal-content {
  position: relative;

  background: var(--gray-white);
  padding: var(--spacing-5) var(--spacing-3);
  border-radius: var(--radius-3xl);

  margin: var(--spacing-3);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;

  padding: var(--spacing-7) var(--spacing-8);
  gap: var(--spacing-6);
  margin: var(--spacing-0) var(--spacing-2-5);

  animation: scale-up-center 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;

  @include size(lg) {
    padding: var(--spacing-7) var(--spacing-6);
  }

  @include size(md) {
    margin: 0;
    width: var(--w-full) !important;
    border-radius: var(--radius-3xl) var(--radius-3xl) var(--radius-none) var(--radius-none);
  }
  @include size(sm) {
    padding: var(--spacing-5) var(--spacing-3);
  }

  @keyframes scale-up-center {
    0% {
      transform: scale(0.95) translateY(20px);
    }
    100% {
      transform: scale(1) translateY(0px);
    }
  }
}

.modal-sm {
  width: 540px;
}

.modal-md {
  width: 720px;
}

.modal-lg {
  width: 992px;
}

.modal-xl {
  width: var(--w-full);
}

.container-loading {
  height: var(--h-full);
  width: var(--w-full);

  border-radius: var(--radius-3xl);

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999;

  background-color: #ffffffbe;

  .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
  }
}

.dark .container-loading {
  background-color: #1a1a1abe;
}
</style>
