<script setup>
import { NEl, NFlex, NIcon, NText } from 'naive-ui'
import { useThemeVars } from 'naive-ui'
import { computed } from 'vue'

const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    // null = нейтральный (фон из темы), либо: primary | success | warning | error | info
    color: {
        type: String,
        default: null
    },
    icon: {
        type: [Object, Function],
        default: null
    },
    noPadding: {
        type: Boolean,
        default: false
    }
})

const themeVars = useThemeVars()

const isNeutral = computed(() => !props.color)
const cssColor  = computed(() => `var(--${props.color}-color)`)

const cardStyle = computed(() => isNeutral.value
    ? `background: ${themeVars.value.cardColor}; border: 1px solid ${themeVars.value.dividerColor};`
    : `--sc-color: ${cssColor.value};
       background: color-mix(in srgb, var(--sc-color) 5%, ${themeVars.value.cardColor});
       border: 1px solid color-mix(in srgb, var(--sc-color) 24%, transparent);`
)

const headerStyle = computed(() => isNeutral.value
    ? `background: ${themeVars.value.tableHeaderColor}; border-bottom: 1px solid ${themeVars.value.dividerColor};`
    : `background: color-mix(in srgb, var(--sc-color) 10%, transparent);
       border-bottom: 1px solid color-mix(in srgb, var(--sc-color) 18%, transparent);`
)

const titleColor = computed(() => isNeutral.value
    ? themeVars.value.textColor2
    : `color-mix(in srgb, var(--sc-color) 85%, ${themeVars.value.textColor1})`
)

const iconColor = computed(() => isNeutral.value
    ? themeVars.value.primaryColor
    : `var(--sc-color)`
)
</script>

<template>
    <NEl class="rounded-xl overflow-hidden" :style="cardStyle">
        <!-- Заголовок -->
        <NFlex
            align="center"
            justify="space-between"
            :wrap="false"
            style="padding: 12px 16px;"
            :style="headerStyle"
        >
            <NFlex align="center" :size="8" :wrap="false">
                <NIcon v-if="icon" size="15" :style="`color: ${iconColor}; flex-shrink: 0;`">
                    <component :is="icon" />
                </NIcon>
                <NText
                    style="font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .6px;"
                    :style="`color: ${titleColor};`"
                >
                    {{ title }}
                </NText>
            </NFlex>

            <slot name="header-extra" />
        </NFlex>

        <!-- Контент -->
        <div :style="noPadding ? '' : 'padding: 16px;'">
            <slot />
        </div>
    </NEl>
</template>
