<script setup>
import {NRadio} from 'naive-ui'
const props = defineProps({
    title: { type: String },
    description: { type: String, default: null }
})
</script>

<template>
    <NRadio value="pro" class="radio-card">
        <div class="card-content">
            <strong class="card-title">{{ title }}</strong>
            <span v-if="description">{{ description }}</span>
        </div>
    </NRadio>
</template>

<style scoped>
/* Убираем стандартные отступы Naive UI */
.radio-card {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* Скрываем стандартный радио-кружок */
.radio-card :deep(.n-radio__action) {
    display: none;
}

/* Превращаем сам n-radio в карточку */
.radio-card {
    display: flex;
    align-items: center;
    border: 1px solid var(--n-text-color-disabled);
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 200px;
    flex: 1;
}

.radio-card:hover {
    border-color: var(--n-dot-color-active);
}

/* Состояние "выбрано" */
.radio-card.n-radio--checked {
    border-color: var(--n-dot-color-active);
}

/* Отключаем выделение текста внутри карточки */
.card-content {
    pointer-events: none;
    user-select: none;
    display: flex;
    flex-direction: column;
    padding-left: 8px;
}
</style>
