<template>
  <PromptDetailContent
    :template="template"
    :show-header="isMobile"
    :show-dismiss-button="!isMobile"
    @back="handleBack"
    @use="handleUse"
    @dismiss="handleDismiss"
  />
</template>

<script setup lang="ts">
import PromptDetailContent from './PromptDetailContent.vue'
import type { PromptTemplate } from '@/types/prompt'

// Props
defineProps<{
  template: PromptTemplate
  isMobile?: boolean
}>()

// Emits
const emit = defineEmits<{
  (e: 'back'): void
  (e: 'use', template: PromptTemplate): void
  (e: 'dismiss'): void
}>()

// Methods
function handleBack() {
  emit('back')
}

function handleUse(template: PromptTemplate) {
  emit('use', template)
}

function handleDismiss() {
  emit('dismiss')
}
</script>
