<script lang="ts" setup>
defineOptions({
  name: 'AnalysisDynamicTask',
});
const props = defineProps({
  dynamicTaskData: {
    type: Array,
    default: () => [] as any[],
  },
});
</script>
<template>
  <ul
    class="divide-border w-full divide-y"
    role="list"
    style="height: 700px; overflow: hidden"
  >
    <Vue3SeamlessScroll
      :list="props.dynamicTaskData"
      :step="0.5"
      hover
      class="scroll-container"
    >
      <li
        v-for="item in props.dynamicTaskData"
        :key="item.title"
        :class="{
          'select-none line-through opacity-60': item.completed,
        }"
        class="flex cursor-pointer justify-between gap-x-6 py-5"
        style="border-bottom: 1px solid hsl(var(--border))"
      >
        <div class="flex min-w-0 items-center gap-x-4">
          <div class="min-w-0 flex-auto">
            <p class="text-foreground text-sm font-semibold leading-6">
              {{ item.title }}
            </p>
            <p
              class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
            >
              {{ item.content }}
            </p>
          </div>
        </div>
        <div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
          <span class="text-foreground/80 mt-6 text-xs leading-6">
            {{ item.date }}
          </span>
        </div>
      </li>
    </Vue3SeamlessScroll>
  </ul>
</template>
