<script>"use strict";
import { onMount, afterUpdate } from "svelte";
import Tooltip from "./Tooltip.svelte";
import * as Prism from "prismjs";
import "prismjs/themes/prism.css";
import "prismjs/themes/prism-coy.css";
let position = "top";
let content = "This is a tooltip!";
let positions = [
  "top",
  "bottom",
  "left",
  "right",
  "top-start",
  "top-end",
  "bottom-start",
  "bottom-end",
  "left-start",
  "left-end",
  "right-start",
  "right-end"
];
let codeSnippet = "";
function updateCodeSnippet() {
  codeSnippet = `<Tooltip position="${position}" content="${content}">
  <button class="px-4 py-2 bg-blue-500 text-white rounded">Hover me</button>
</Tooltip>`;
}
onMount(() => {
  updateCodeSnippet();
  Prism.highlightAll();
});
afterUpdate(() => {
  updateCodeSnippet();
  const codeElement = document.getElementById("tooltip-code-snippet");
  if (codeElement) {
    codeElement.textContent = codeSnippet;
    Prism.highlightElement(codeElement);
  }
});
</script>

<div class="flex flex-col justify-center items-center gap-4">
	<div class="w-1/2">
		<!-- Display the code snippet -->
		<p>
			<strong>Note:</strong> Ensure <code class="language-html">{`<Tooltip />`}</code> is imported in
			your component.
		</p>
		<pre><code class="language-html" id="tooltip-code-snippet">{codeSnippet}</code></pre>
	</div>

	<div>
		<Tooltip {position} {content}>
			<button class="px-4 py-2 bg-blue-500 text-white rounded">Hover me</button>
		</Tooltip>
	</div>

	<form on:submit|preventDefault class="flex flex-col justify-center items-start gap-2">
		<p>
			<label>
				Content:
				<input bind:value={content} class="border p-2 rounded w-full" />
			</label>
		</p>
		<p>
			<label>
				Position:
				<select bind:value={position} class="border p-2 rounded w-full">
					{#each positions as pos}
						<option value={pos}>{pos}</option>
					{/each}
				</select>
			</label>
		</p>
	</form>
</div>
