<template>
  <Transition name="sidebar-slide">
    <div v-if="isOpen" class="fixed inset-0 z-50 flex">
      <div class="fixed inset-0 bg-white flex flex-col">
        <!-- Header -->
        <div class="flex items-center justify-between p-4 border-b shrink-0">
          <div class="flex items-center space-x-3">
            <Button variant="ghost" size="sm" @click="handleBack" class="shrink-0">
              <i class="dku-icon-chevron-left-16" />
              Back to Prompt Library
            </Button>
          </div>
        </div>

        <!-- Content -->
        <div class="overflow-y-auto flex-1 px-3 py-5">
          <div
            class="max-w-[675px] h-full mx-auto md:border md:border-border px-2.5 md:pt-5 md:px-5 flex-1 md:rounded-lg"
          >
            <PromptDetailContent
              v-if="template"
              :template="template"
              :show-header="false"
              :show-dismiss-button="false"
              @back="handleBack"
              @use="handleUse"
            />
          </div>
        </div>
      </div>
    </div>
  </Transition>
</template>

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

// Props
defineProps<{
  isOpen: boolean
  template: PromptTemplate | null
}>()

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

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

function handleUse(template: PromptTemplate) {
  emit('use', template)
}
</script>

<style scoped>
.sidebar-slide-enter-active,
.sidebar-slide-leave-active {
  transition: all 0.3s ease;
}

.sidebar-slide-enter-from {
  opacity: 0;
  transform: translateX(100%);
}

.sidebar-slide-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
</style>
