"use client";

import { useState } from "react";
import { Info } from "lucide-react";

export function InfoBubble({ text }: { text: string }) {
  const [open, setOpen] = useState(false);

  return (
    <span className="relative inline-flex align-middle ml-1">
      <button
        type="button"
        aria-label="Hilfe anzeigen"
        onMouseEnter={() => setOpen(true)}
        onMouseLeave={() => setOpen(false)}
        onClick={() => setOpen((o) => !o)}
        className="flex h-4 w-4 items-center justify-center rounded-full bg-accent-soft text-accent-soft-fg hover:opacity-80"
      >
        <Info className="h-2.5 w-2.5" strokeWidth={2.5} />
      </button>
      {open && (
        <span className="absolute left-1/2 top-6 z-20 w-64 -translate-x-1/2 rounded-lg border border-border bg-surface p-2.5 text-xs leading-snug text-fg shadow-lg">
          {text}
        </span>
      )}
    </span>
  );
}