import { type ReactNode } from 'react';

import { cn } from '@/utils/classNames';

export interface TooltipProps {
  readonly content: ReactNode;
  readonly children: ReactNode;
  readonly className?: string;
}

export function Tooltip({ children, className, content }: TooltipProps) {
  return (
    <span className={cn('group relative inline-flex', className)}>
      {children}
      <span
        role="tooltip"
        className="pointer-events-none absolute bottom-[calc(100%+0.5rem)] left-1/2 z-20 max-w-xs -translate-x-1/2 whitespace-nowrap rounded-xl border border-border/70 bg-elevated px-3 py-1.5 text-xs font-medium text-foreground opacity-0 shadow-panel transition duration-150 group-hover:opacity-100 group-focus-within:opacity-100"
      >
        {content}
      </span>
    </span>
  );
}