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

import { MdiChevron } from '@vben/icons';

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

interface Props {
  items?: WorkflowItem[];
}
defineOptions({
  name: 'WorkflowsView',
});

withDefaults(defineProps<Props>(), {
  items: () => [],
});
defineEmits(['click']);
</script>

<template>
  <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
    <template v-for="item in items" :key="item.title">
      <Card
        :title="item.title"
        class="w-full cursor-pointer hover:shadow-xl"
        @click="$emit('click', item.path)"
      >
        <CardHeader>
          <div class="flex justify-between">
            <CardTitle class="flex-start text-xl">
              <VbenIcon :icon="item.icon" class="size-8 flex-shrink-0" />
              {{ item.title }}
            </CardTitle>
            <MdiChevron class="size-4" />
          </div>
        </CardHeader>

        <CardContent class="flex items-center justify-between">
          <p>{{ item.description }}</p>
          <p><VbenIcon icon="" /></p>
        </CardContent>
      </Card>
    </template>
  </div>
</template>
