<template>
  <div class="pixel-card" :class="[sizeClass, { clickable }]">
    <slot />
  </div>
</template>

<script setup>
const props = defineProps({
  size: {
    type: String,
    default: 'normal', // 'small', 'normal', 'large'
    validator: (value) => ['small', 'normal', 'large'].includes(value)
  },
  clickable: {
    type: Boolean,
    default: false
  }
})

const sizeClass = computed(() => `size-${props.size}`)
</script>

<style scoped>
.pixel-card {
  background: white;
  border: var(--pixel-border) solid #000;
  box-shadow: var(--pixel-shadow);
  padding: 16px;
  position: relative;
  image-rendering: pixelated;
}

.pixel-card.clickable {
  cursor: pointer;
  transition: transform 0.1s ease;
}

.pixel-card.clickable:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.3);
}

.pixel-card.clickable:active {
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
}

.pixel-card.size-small {
  padding: 8px;
  font-size: 10px;
}

.pixel-card.size-normal {
  padding: 16px;
  font-size: 12px;
}

.pixel-card.size-large {
  padding: 24px;
  font-size: 14px;
}
</style>
