<script setup lang="ts">
import { X } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'

interface Props {
  title: string
  deletedAt?: string | null
}

defineProps<Props>()
defineEmits<{ close: [] }>()
</script>

<template>
  <div class="p-6 border-b">
    <div class="flex items-center justify-between gap-3">
      <div class="flex items-center gap-3 min-w-0 flex-1">
        <h2 class="text-xl font-bold truncate" :class="{ 'line-through text-muted-foreground': deletedAt }">{{ title }}</h2>
        <slot name="badges" />
      </div>

      <Button variant="ghost" size="icon-sm" class="flex-shrink-0" @click="$emit('close')">
        <X class="h-4 w-4" />
      </Button>
    </div>
  </div>
</template>
