import type { HTMLAttributes, ReactNode } from 'react';

export interface HoverDetailsProps extends HTMLAttributes<HTMLSpanElement> {
  details: string | string[];
  children: ReactNode;
}

export function HoverDetails({
  details,
  children,
  className,
  ...props
}: HoverDetailsProps) {
  const detailText = Array.isArray(details)
    ? details.filter(Boolean).join('\n')
    : details;
  const classes = ['ui-hover-details', className ?? ''].filter(Boolean).join(' ');

  return (
    <span
      {...props}
      className={classes}
      data-tooltip={detailText}
      tabIndex={props.tabIndex ?? 0}
    >
      {children}
    </span>
  );
}
