<template>
   <div class="x-card" :style="{ width }">
      <div class="header">{{ title }}</div>
      <div :class="['content', { footer_height: slot.footer }]">
         <slot name="default"></slot>
      </div>
      <div class="footer" v-if="slot.footer">
         <slot name="footer"></slot>
      </div>
   </div>
</template>
<script lang="ts" setup>
import { useSlots } from "vue"
interface Props {
   title: string;
   width?: string;
}
const props = withDefaults(defineProps<Props>(), {
   width: "100%"
})
const slot = useSlots()

</script>
<style lang="less" scoped>
   .x-card {
      margin-bottom: 32px;
      border-radius: @smallRadius;
      box-shadow: @smallShadow;
      border: 1px solid @borderColor;
      position: relative;
      .header {
         border-bottom: 1px solid @borderColor;
         font-size: @middleSize;
         background-color: @default;
         padding: 10px;
      }
      .content {
         padding: 10px;
      }
      .footer_height {
         margin-bottom: @menuHeight;
      }
      .content,
      .footer {
         padding: 10px;
      }
      .footer {
         display: flex;
         justify-content: center;
         align-items: center;
         position: absolute;
         bottom: 8px;
         width: 100%;
      }
   }
</style>
