Popover with arrow

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Info } from "lucide-react";

const spring = { type: "spring" as const, stiffness: 300, damping: 30 };

interface PopoverProps {
  title?: string;
}

export default function Popover({ title = "Before you continue" }: PopoverProps) {
  const [open, setOpen] = useState(false);

  return (
    <div className="relative text-[#1d1d1f] dark:text-[#f5f5f7]">
      <button
        type="button"
        aria-label="Information"
        aria-expanded={open}
        onClick={() => setOpen((o) => !o)}
        className="grid h-11 w-11 place-items-center rounded-full bg-white dark:bg-[#1c1c1e] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)]"
      >
        <Info className="h-5 w-5" />
      </button>
      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, scale: 0.85, y: -8 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.9 }}
            style={{ transformOrigin: "top center" }}
            transition={spring}
            className="absolute left-1/2 top-14 z-10 w-56 -translate-x-1/2 rounded-2xl bg-white p-4 text-sm shadow-[0_4px_12px_rgba(0,0,0,0.04),0_24px_60px_rgba(0,0,0,0.1)] dark:bg-[#1d1d1f]"
          >
            <i className="absolute -top-1.5 left-1/2 h-3 w-3 -translate-x-1/2 rotate-45 bg-white dark:bg-[#1d1d1f]" />
            <b>{title}</b>
            <p className="mt-1 text-[#86868b]">Brief, contextual info.</p>
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}