<script setup lang="ts">
import { toRefs } from 'vue'

const props = withDefaults(
  defineProps<{
    padding?: string
    hoverable?: boolean
  }>(),
  {
    padding: '18px',
  },
)

const { padding, hoverable } = toRefs(props)
</script>

<template>
  <div class="glass-card" :class="{ hoverable }">
    <slot />
  </div>
</template>

<style scoped>
.glass-card {
  background: var(--color-white-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border-glass);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-glass);
  padding: v-bind(padding);
}
.hoverable {
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  cursor: pointer;
}
.hoverable:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px var(--color-black-a12);
}
</style>
