<template>
    <pre class="flex justify-between m-0 rounded-bl-none rounded-br-none dark">
        <div>{{ language }}</div>
        <UButton
            leading-icon="i-heroicons-document-duplicate-20-solid"
            color="gray"
            variant="link"
            @click="handleCopy"
        />
    </pre>
    <UDivider :ui="{ border: { base: 'border-gray-700' } }" />
    <pre :class="$props.class" class="m-0 rounded-tl-none rounded-tr-none"><code v-html="codeBlock"></code></pre>
</template>

<script setup>
import hljs from 'highlight.js'
import 'highlight.js/styles/stackoverflow-dark.css'
const toast = useToast()
const props = defineProps({
    code: {
        type: String,
        default: ''
    },
    language: {
        type: String,
        default: null
    },
    filename: {
        type: String,
        default: null
    },
    highlights: {
        type: Array,
        default: () => []
    },
    meta: {
        type: String,
        default: null
    },
    class: {
        type: String,
        default: null
    }
})
const handleCopy = () => {
    useCopyToClipboard().copy(props.code)
    toast.add({
        icon: 'i-heroicons-information-circle-20-solid',
        timeout: 1000,
        title: '复制成功'
    })
}
const codeBlock = ref(null)
const handleRender = () => {
    if (props.language) {
        const lang = props.language === 'vue' ? 'html' : props.language
        codeBlock.value = hljs.highlight(lang, props.code, true).value
    }
}
watch(()=> props.code, () => {
    handleRender();
})
onMounted(() => {
    handleRender();
})
</script>

<style>
pre code .line {
    display: block;
}
.hljs {
    background: transparent;
}
</style>