<script setup lang="ts">
defineProps<{
  padding?: 'sm' | 'md' | 'lg'
  hoverable?: boolean
}>()
</script>

<template>
  <div
    class="app-card dark-card"
    :class="[
      `app-card--${padding ?? 'md'}`,
      { 'app-card--hoverable': hoverable }
    ]"
  >
    <slot />
  </div>
</template>

<style scoped>
.app-card { transition: background var(--transition), border-color var(--transition); }

.app-card--sm { padding: var(--space-4); }
.app-card--md { padding: var(--space-6); }
.app-card--lg { padding: var(--space-8); }

.app-card--hoverable:hover {
  background: var(--color-bg-card-hover);
  border-color: rgba(255, 255, 255, 0.14);
}
</style>
