<template>
  <article
    class="vm-card"
    :class="{ 'is-add': add, 'is-bordered': bordered, 'is-compact': compact }"
  >
    <div v-if="$slots.toolbar" class="vm-card__toolbar">
      <slot name="toolbar" />
    </div>
    <component
      :is="add ? 'button' : 'div'"
      class="vm-card__inner"
      :type="add ? 'button' : undefined"
      :disabled="add && disabled"
      @click="add ? emit('click', $event) : undefined"
    >
      <slot />
    </component>
    <footer
      v-if="$slots.footer"
      class="vm-card__foot"
      :class="{ 'is-end': footerEnd }"
    >
      <slot name="footer" />
    </footer>
  </article>
</template>

<script setup lang="ts">
defineOptions({ name: 'vm-card' })

withDefaults(
  defineProps<{
    add?: boolean
    bordered?: boolean
    compact?: boolean
    footerEnd?: boolean
    disabled?: boolean
  }>(),
  {
    add: false,
    bordered: false,
    compact: false,
    footerEnd: false,
    disabled: false,
  },
)

const emit = defineEmits<{
  click: [e: MouseEvent]
}>()
</script>

<style lang="scss" scoped>
.vm-card {
  position: relative;
  display: flex;
  min-height: 168px;
  flex-direction: column;
  border-radius: 16px;
  background: var(--card);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  text-align: left;

  &.is-bordered {
    border: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);
  }

  &.is-compact {
    min-height: 180px;
    border-radius: 14px;

    .vm-card__inner {
      padding: 12px;
    }

    .vm-card__foot {
      padding: 10px 12px 12px;
    }
  }

  &.is-add {
    border: 1px dashed color-mix(in srgb, var(--brand) 36%, transparent);
    background: color-mix(in srgb, var(--brand) 4%, var(--card));
    box-shadow: none;

    &.is-compact {
      min-height: 180px;
      border-style: solid;
      border-color: color-mix(in srgb, var(--foreground) 6%, transparent);
      background: var(--card);

      .vm-card__inner {
        align-items: center;
        justify-content: center;
        gap: 6px;
        color: color-mix(in srgb, var(--foreground) 62%, transparent);
        font-size: 12px;
        font-weight: 600;

        i {
          font-size: 32px;
          line-height: 1;
        }

        &:hover:not(:disabled) {
          border-color: color-mix(in srgb, var(--foreground) 18%, transparent);
          background: var(--muted);
          color: var(--foreground);
        }

        &:disabled {
          opacity: 1;
          color: color-mix(in srgb, var(--foreground) 55%, transparent);
        }
      }
    }
  }
}

.vm-card__toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1;
}

.vm-card__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 16px;
  border: none;
  background: transparent;
  text-align: left;
  color: inherit;

  .is-add & {
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    color: var(--brand);
    font-size: 14px;
    font-weight: 650;

    &:hover:not(:disabled) {
      background: color-mix(in srgb, var(--foreground) 5%, transparent);
    }

    i {
      font-size: 28px;
    }

    &:disabled {
      opacity: 0.85;
      cursor: not-allowed;
    }
  }
}

.vm-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding: 10px 16px 14px;
  border-top: 1px solid color-mix(in srgb, var(--foreground) 6%, transparent);

  &.is-end {
    justify-content: flex-end;
  }
}
</style>
