---
import { v4 as uuidv4 } from "uuid";

const popoverUUID = uuidv4();

const keys: { [key: string]: string } = {
  ADCP: "Acoustic doppler current profiler",
  COTS: "Consumer off-the-shelf",
  CTD: "Conductivity, temperature, and depth sensor",
  DUTs: "Devices under test",
  GUI: "Graphical user interface",
  NUC: "A small and low-power computer made by Intel",
  PCBs: "Printed circuit boards",
  SCARA: "Selective Compliance Assembly Robot Arm",
  TDD: "Test driven development",
  UPS: "Uninterruptible power supply",
  VISA: "Virtual instrument software architecture",
  VPS: "Virtual private server",
};

const key: string | undefined = Astro.props.key;
let word: string | undefined = Astro.props.word;
let definition: string | undefined = Astro.props.definition;

if (key && keys.hasOwnProperty(key)) {
  word = key;
  definition = keys[key];
}

if (!word || !definition) {
  throw new Error(
    `Popover definition is missing! Inputs were\nkey: ${key}\nword: ${word}\ndefinition: ${definition}`,
  );
}
---

<>
  <a
    href="#"
    class="text-fg-brand decoration-caperren-green font-medium underline decoration-dashed hover:no-underline"
    data-popover-target={popoverUUID}>{word}</a
  >
  <div
    data-popover
    id={popoverUUID}
    role="tooltip"
    class="text-body border-caperren-green invisible absolute z-90 inline-block w-fit max-w-96 rounded-lg border border-dashed bg-black p-3 text-sm opacity-0 shadow-xs transition-opacity duration-300"
  >
    <div>
      <h3
        class="text-heading border-b-caperren-green-dark mb-1 border-b font-semibold"
      >
        {word}
      </h3>
      <p>{definition}</p>
    </div>
  </div>
</>