<template>
  <Card
    @click="$emit('view', template)"
    class="group hover:border-primary-alpha-dark-80 hover:shadow-lg transition-all duration-300 cursor-pointer hover:transform rounded-lg max-h-[140px] py-4 px-5 gap-1.5"
    :class="{ 'border-primary-alpha-dark-80 bg-primary-alpha-light-10  ': selected }"
  >
    <div class="flex items-center space-x-2">
      <div class="flex items-center justify-center">
        <i
          class="dku-icon-text-box-16 text-primary text-sm"
          :class="{ 'text-primary-hover': selected }"
        ></i>
      </div>

      <h3
        class="font-semibold text-card-foreground group-hover:text-primary-hover transition-colors translate-y-0.25"
        :class="{ 'text-primary-hover': selected }"
      >
        {{ template.name }}
      </h3>
    </div>

    <p class="text-muted-foreground text-sm leading-relaxed overflow-y-auto">
      {{ template.description }}
    </p>
  </Card>
</template>

<script setup lang="ts">
import type { Prompt } from '@/types/prompt'
import Card from '@/components/ui/card/Card.vue'

defineProps<{
  template: Prompt
  selected?: boolean
}>()

defineEmits<{
  (e: 'select', template: Prompt): void
  (e: 'view', template: Prompt): void
}>()
</script>
