<template>
  <div
    class="[box-shadow:0_8px_24px_rgba(15,23,42,0.05)] w-full bg-white border border-[#f1f5f9] rounded-[24px] overflow-hidden"
    :class="[{ '[transition:transform_0.18s_ease,opacity_0.18s_ease] active:scale-985 active:opacity-92': pressable, 'opacity-55': disabled }, variantClass]"
    @click="handleClick">
    <slot />
  </div>
</template>

<script setup>
import { computed, defineEmits, defineProps } from "vue";

const props = defineProps({
  variant: {
    type: String,
    default: "default",
  },
  pressable: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["select"]);

const variantClass = computed(() => `visual-card-shell--${props.variant}`);

const handleClick = () => {
  if (!props.pressable || props.disabled) return;
  emit("select");
};
</script>

<style scoped>
.visual-card-shell--soft {
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 9px 34px rgba(27, 9, 91, 0.07);
}

.visual-card-shell--detail {
  border-radius: 20px;
}
</style>
