<script setup lang="ts">
    import { computed } from 'vue';
    import { UIColorName, UIColorValues } from '@/UI-kit/types';
    import { UIColor } from '@/UI-kit/constants';

    const props = withDefaults(
        defineProps<{
            isBoxShadow?: boolean;
            isBorder?: boolean;
            bgColor?: UIColorValues;
            color?: UIColorValues;
            borderRadius?: string;
            padding?: string;
        }>(),
        {
            isBoxShadow: true,
            isBorder: true,
            bgColor: UIColor[UIColorName.White],
            color: UIColor[UIColorName.Gray600],
            borderRadius: '16px',
            padding: '16px',
        },
    );

    const classList = computed(() => ({
        '--box-shadow': props.isBoxShadow,
        '--border': props.isBorder,
    }));
</script>

<template>
    <div class="ui-card" :class="classList">
        <slot />
    </div>
</template>

<style scoped lang="scss">
    .ui-card {
        padding: v-bind(padding);
        color: v-bind(color);
        border: 1px solid transparent;
        border-radius: v-bind(borderRadius);
        background-color: v-bind(bgColor);

        &.--border {
            border: 1px solid rgb(255 255 255 / 50%);
        }

        &.--box-shadow {
            box-shadow: 0 0 4px rgb(43 43 43 / 15%);
        }
    }
</style>
