<script setup lang="ts">
import { computed } from 'vue'
import hljs from 'highlight.js/lib/core'
import sql from 'highlight.js/lib/languages/sql'
import 'highlight.js/styles/github-dark.css'

hljs.registerLanguage('sql', sql)

const props = defineProps<{ sql: string }>()

const highlighted = computed(() => {
  try {
    return hljs.highlight(props.sql, { language: 'sql' }).value
  } catch {
    return props.sql
  }
})

function copySQL() {
  navigator.clipboard.writeText(props.sql)
}
</script>

<template>
  <div class="relative">
    <button
      @click="copySQL"
      class="absolute top-2 right-2 px-2 py-1 text-xs text-dark-400 hover:text-dark-200 bg-dark-800 rounded"
    >Copy</button>
    <pre class="p-4 bg-dark-950 text-sm overflow-x-auto"><code v-html="highlighted" /></pre>
  </div>
</template>
