<template>
  <a-descriptions
    v-bind="props"
  >
    <a-descriptions-item
      v-for="item in options"
      :key="item.label"
      v-bind="item"
    >
      <slot v-if="slots.value" name="value" />
      <template v-else>
        {{ item.value }}
      </template>
    </a-descriptions-item>
    <template v-if="slots.title" #title>
      <slot name="title" />
    </template>
    <template v-if="slots.extra" #extra>
      <slot name="extra" />
    </template>
  </a-descriptions>
</template>

<script lang="ts" setup>
import type { Slot, VNode } from 'vue';
import type { UDescriptionItem } from './types';

const props = withDefaults(defineProps<{
  options: UDescriptionItem[];
  bordered?: boolean;
  column?: number;
  title?: string;
  colon?: boolean;
  layout?: 'horizontal' | 'vertical',
  size?: 'default' | 'middle' | 'small',
  extra?: string | VNode | Slot
}>(), {
  options: () => ([]),
  bordered: false,
  colon: true,
  column: 2,
  layout: 'horizontal',
  size: 'default'
});

const slots = useSlots();
</script>

<style lang="scss" scoped></style>
