<script setup lang="ts">
import type { WorkbenchProjectItem } from '../typing';

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  VbenIcon,
} from '@vben-core/shadcn-ui';

interface Props {
  items?: WorkbenchProjectItem[];
  title: string;
}

defineOptions({
  name: 'WorkbenchProject',
});

withDefaults(defineProps<Props>(), {
  items: () => [],
});

defineEmits(['click']);
</script>

<template>
  <Card>
    <CardHeader>
      <CardTitle class="text-lg">{{ title }}</CardTitle>
    </CardHeader>
    <CardContent class="flex flex-wrap p-0">
      <template v-for="(item, index) in items" :key="item.title">
        <div
          :class="{
            'border-r-0': index % 3 === 2,
            'border-t-0': index > 2,
            'pb-4': index > 2,
            'rounded-bl-xl': index >= items.length - 3 && index % 3 === 0,
            'rounded-br-xl': index === items.length - 1 && index % 3 === 2,
          }"
          class="border-border group w-full cursor-pointer border-b border-r border-t p-4 transition-all hover:shadow-xl md:w-1/2 lg:w-1/3"
          @click="$emit('click', item)"
        >
          <div class="flex items-center">
            <VbenIcon
              :color="item.color"
              :icon="item.icon"
              class="size-8 transition-all duration-300 group-hover:scale-110"
            />
            <span class="ml-4 text-lg font-medium">{{ item.title }}</span>
          </div>

          <!-- 内容区域支持插槽自定义 -->
          <slot name="content" :item="item" :index="index">
            <div class="text-foreground/80 mt-4 flex h-10">
              {{ item.content }}
            </div>
          </slot>

          <!-- 底部信息区域支持插槽自定义 -->
          <slot name="footer" :item="item" :index="index">
            <div class="text-foreground/80 flex justify-between">
              <span>{{ item.group }}</span>
              <span>{{ item.date }}</span>
            </div>
          </slot>
        </div>
      </template>
    </CardContent>
  </Card>
</template>
