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

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

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

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

<template>
  <Card style="height: calc(100vh - 120px); overflow-y: auto">
    <CardHeader class="py-4">
      <CardTitle class="text-lg">{{ title }}</CardTitle>
      <CardDescription>请选择需要爬取的网站</CardDescription>
    </CardHeader>
    <CardContent class="flex flex-wrap p-5 pt-0">
      <ul class="divide-border w-full divide-y" role="list">
        <li
          v-for="item in items"
          :key="item.id"
          @click="$emit('click', item)"
          class="flex cursor-pointer justify-between gap-x-6 py-5"
        >
          {{ item.name }}
        </li>
      </ul>
    </CardContent>
  </Card>
</template>
