<template>
  <div class="code-snippet-container">
    <div class="button-container h-8 w-8 p-0 inline-flex items-center justify-center">
      <!-- Button to copy code to clipboard -->
      <Button icon="pi pi-copy" @click="copyToClipboard" class="p-mt-2" />
    </div>
    <!-- Code display area with syntax highlighting -->
    <pre v-html="highlightedCode"></pre>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import Button from 'primevue/button';
import Toast from 'primevue/toast';
import { useToast } from 'primevue/usetoast';

import Prism from 'prismjs';
import 'prismjs/components/prism-javascript'; // Import necessary languages
import 'prismjs/components/prism-systemd'; // Import necessary languages
import 'prismjs/themes/prism-tomorrow.css'; // Import a theme for syntax highlighting

const toast = useToast();

// Define the code snippet as a prop
const props = defineProps({
  code: {
    type: String,
    required: true
  },
  language: {
    type: String,
    default: 'systemd'
  }
});

const highlightedCode = computed(() => {
  return Prism.highlight(props.code, Prism.languages[props.language], props.language);
});

// Function to copy the code to the clipboard
function copyToClipboard() {
  navigator.clipboard.writeText(props.code).then(() => {
    toast.add({ severity: 'success', summary: 'Success', detail: 'Code copied to clipboard!', life: 10000 });
  }).catch((error) => {
    console.error('Failed to copy code:', error);
    toast.add({ severity: 'error', summary: 'Error', detail: 'Failed to copy code.', life: 10000 });
  });
}
</script>

<style scoped>
.code-snippet-container {
  position: relative;
  /* Enable positioning of child elements */
}

.class="button-container" {
  position: sticky;
  top: 10px;
  /* Adjust as needed */
  right: 10px;
  /* Adjust as needed */
  z-index: 1000;
}

pre {
  background-color: #2d2d2d;
  color: #ccc;
  padding: 1em;
  border-radius: 5px;
  overflow-x: auto;
  white-space: pre-wrap;
}

.button-container {
  position: absolute;
  top: 10px;
  /* Adjust as needed */
  right: 10px;
  /* Adjust as needed */
}

.p-mt-2 {
  margin-top: 1em;
}
</style>
