Hover Engraving

"use client";

import * as React from "react";
import HoverEngraving, {
  type EngravingStatus,
} from "@/components/ui/hover-engraving";

const LIST: {
  text: string;
  kind: string;
  details: string[];
  tags?: string[];
  status?: { led: EngravingStatus; text: string };
}[] = [
  {
    text: "slept badly, up at 5",
    kind: "LOG",
    details: ["07:40", "SLEEP 6 H", "ALSO TIRED"],
    status: { led: "live", text: "RECOGNIZER ✓" },
  },
  {
    text: "send the poster tomorrow 4pm",
    kind: "TASK",
    details: ["TOMORROW 16:00"],
    tags: ["poster"],
    status: { led: "live", text: "RECOGNIZER ✓" },
  },
  {
    text: "lunch with Priya",
    kind: "LUNCH? 0.71",
    details: [],
    status: { led: "waiting", text: "ASKING…" },
  },
  {
    text: "sk-live-4f9a…",
    kind: "NOT SENT",
    details: ["LOOKS LIKE A SECRET"],
    status: { led: "off", text: "KEPT ON THIS MAC" },
  },
];

export default function HoverEngravingDemo() {
  return (
    <div className="w-full h-screen flex items-center justify-center bg-[var(--background)] text-[var(--foreground)]">
      <div className="flex flex-col gap-8" data-testid="eng-list">
        {LIST.map((b, i) => (
          <div
            key={b.text}
            className="mu-icon-trigger relative w-fit rounded-plate py-4 pr-8"
            aria-describedby={`eng-${i}`}
            data-block={i}
          >
            <span className="type-content text-ink">{b.text}</span>
            <HoverEngraving
              id={`eng-${i}`}
              kind={b.kind}
              details={b.details}
              tags={b.tags}
              status={b.status}
              placement="beside"
            />
          </div>
        ))}
      </div>
    </div>
  );
}