<script setup lang="ts">
import { defineEmits, defineProps, useSlots } from "vue";

interface Props {
	header?: string;
}

type Emits = {
	(eventName: "click"): void;
};

defineProps<Props>();

const emit = defineEmits<Emits>();
const slots = useSlots();
</script>

<template>
  <div
    class="card"
    @click="emit('click')"
  >
    <div class="card__header">
      <slot
        v-if="slots.header"
        name="header"
      />
      <h2
        v-else-if="header"
        class="h-m-0"
      >
        {{ header }}
      </h2>
    </div>
    <div class="card__body">
      <slot v-if="slots.default" />
    </div>

    <div
      v-if="slots.footer"
      class="card__footer"
    >
      <slot name="footer" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.card {
	border-radius: 16px;
	border: 1px solid var(--gray-border);
	background: var(--light);
	display: flex;
	padding: 24px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	align-self: stretch;
	text-align: left;
	max-width: unset;
	width: 100%;

	&__header,
	&__body,
	&__footer {
		display: flex;
		width: 100%;
	}

	&__body {
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}

	&__footer {
		padding: 16px;
		cursor: pointer;
		text-align: right;
	}
}
</style>
