'use client';

import * as React from 'react';
import { Popover } from '@headlessui/react';
import clsx from 'clsx';

export function PopoverTooltip({
  children,
  content,
  className,
}: {
  children: React.ReactNode;
  content: string | React.ReactNode;
  className?: string;
}) {
  return (
    <Popover className="relative">
      <Popover.Button className="outline-none">{children}</Popover.Button>

      <Popover.Panel className="absolute z-10 right-0">
        <div className={clsx(className)}>{content}</div>
      </Popover.Panel>
    </Popover>
  );
}