<template>
  <div class="visual-card-shell w-full bg-white border-F1F5F9 rounded-24 border-box overflow-hidden"
    :class="[{ 'is-pressable': pressable, 'is-disabled': disabled }, variantClass]" @click="handleClick">
    <slot />
  </div>
</template>

<script setup>
import { computed } 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 lang="scss">
@import "./styles/index.scss";
</style>
