<template>
  <Card
    class="p-3 rounded-sm border-2 shadow-none cursor-pointer hover:bg-accent"
    :class="{ 'border-primary': isSelected }"
  >
    <CardContent class="p-0">
      <div class="flex p-0">
        <BotMessageSquare class="flex-none mr-2 mt-[1px]" :size="18" />
        <p class="truncate text-[13px] font-medium">{{ trace.name }}</p>
      </div>
      <div class="flex p-0 mt-2 opacity-65 font-mono">
        <div class="flex flex-2">
          <Calendar1 class="flex-none ml-[1px] mr-2" :size="16" />
          <p class="tracking-wide text-xs mt-[1px]">
            {{ formatTraceDateTime(trace.begin) }}
          </p>
        </div>
        <div class="flex">
          <Timer class="mr-1" :size="16" />
          <p class="text-left text-xs mt-[1px]">{{ ((trace.duration || 0) / 1000).toFixed(2) }}s</p>
        </div>
      </div>
    </CardContent>
  </Card>
</template>

<script setup lang="ts">
import { BotMessageSquare, Calendar1, Timer } from 'lucide-vue-next'

import { Card, CardContent } from '@/components/ui/card'
import { formatTraceDateTime } from '@/utils/formatDate'
import type { Trace } from '@/common/interface/trace'

const { trace, isSelected } = defineProps({
  trace: {
    type: Object as () => Trace,
    required: true
  },
  isSelected: Boolean
})
</script>
