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

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

interface Props {
  items?: WordHistoryItem[];
  title: string;
  loading: boolean;
}

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

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

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

<template>
  <Card
    style="height: calc(55vh - 120px); margin-bottom: 20px; overflow-y: auto"
  >
    <CardHeader class="py-4">
      <CardTitle class="text-lg">运行历史</CardTitle>
    </CardHeader>
    <CardContent class="flex flex-wrap p-5 pt-0">
      <ul class="divide-border w-full divide-y" role="list">
        <li
          v-for="(item, index) in items"
          :key="index"
          @click="$emit('click', item)"
          class="flex cursor-pointer justify-between gap-x-6 py-5"
        >
          {{ item.id }}
        </li>
      </ul>
    </CardContent>
  </Card>
</template>
