<script setup>

import TDivider from "@/components/ui/TDivider.vue";

const props = defineProps({
	header: {type: String, default: ""},
	cols: {type: [Number, String], default: 0},
	gap: {type: [Number, String], default: -1}
})

</script>

<template>
	<div>
		<div class="card-box" v-bind="$attrs">
			<div class="header" v-if="(header && header.length > 0) || $slots.header">{{ header }}
				<slot name="header"></slot>
			</div>
			<div class="rows" :class="{'mt-0': (header && header.length > 0) || $slots.header, ['fixed-cols grid-cols-' + cols]:(cols > 0), ['fixed-gap gap-y-' + gap]:(gap > -1)  }">
				<slot></slot>
			</div>
			<div class="footer" v-if="$slots.footer">
				<TDivider></TDivider>
				<slot name="footer"></slot>
			</div>
		</div>
	</div>
</template>

<style scoped lang="postcss">
.card-box {
	@apply border-[1px] p-2 rounded-lg;
	border-color: var(--p-content-border-color);

	&:hover {
		border-left-color: var(--p-primary-color);
		border-bottom-left-radius: 0;
		border-top-left-radius: 0;
	}
}

.rows {
	@apply grid;
}

.rows:not(.fixed-cols) {
	@apply grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5;
}

.rows:not(.fixed-gap) {
	@apply gap-y-3;
}

.header {
	font-weight: 400;
	color: #333;
	font-size: 1.05em;
	@apply px-4 mb-4 text-xl;
}

.dark .header {
	@apply text-gray-300;
}

.footer {
	@apply px-4;
}

.footer .comment, :deep(.footer .comment) {
	font-size: 0.95em;
	@apply !mt-1.5 border-l-2 dark:border-l-gray-800 pl-2;
}

:deep(a) {
	color: var(--p-primary-color);
}

:deep(a:hover) {
	color: var(--p-primary-700);
}
</style>
<style lang="postcss">
.dark .card-box a:hover {
	color: var(--p-primary-300);
}
</style>