<script setup>
/**
 * RqCard.vue — Carte conteneur RecruitQuizz
 *
 * @prop padding  'none' | 'sm' | 'md' | 'lg'
 * @prop hover    Boolean — active l'effet de survol (lift)
 * @prop accent   'primary' | 'gold' | 'green' | 'red' — bordure colorée en bas
 */
defineProps({
    padding: { type: String, default: 'md' },
    hover:   { type: Boolean, default: false },
    accent:  { type: String, default: null },
});
</script>

<template>
    <div
        :class="[
            'bg-surface rounded-2xl border border-ink/[0.07] shadow-sm',
            hover && 'transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md',
            accent === 'primary' && 'border-b-2 border-b-primary',
            accent === 'gold'    && 'border-b-2 border-b-highlight',
            accent === 'green'   && 'border-b-2 border-b-success',
            accent === 'red'     && 'border-b-2 border-b-accent',
            padding === 'none' && 'overflow-hidden',
            padding === 'sm'   && 'p-4',
            padding === 'md'   && 'p-5',
            padding === 'lg'   && 'p-6',
        ]"
    >
        <slot />
    </div>
</template>
