lti-web-client/src/components/Tooltip.tsx

import { ReactNode } from 'react';

import { cn } from '@/lib/helper';
import { Color } from '@/types/theme';

interface TooltipProps {
  children?: ReactNode;
  content?: ReactNode;
  className?: {
    wrapper?: string;
    content?: string;
  };
  open?: boolean;
  color?: Color;
  position?: 'top' | 'bottom' | 'left' | 'right';
}

const Tooltip = ({
  children,
  content,
  className,
  open,
  color,
  position,
}: TooltipProps) => {
  const tooltipBaseClassName = cn('tooltip', {
    'tooltip-open': typeof open === 'boolean' && open,

    'tooltip-top': position === 'top',
    'tooltip-bottom': position === 'bottom',
    'tooltip-left': position === 'left',
    'tooltip-right': position === 'right',

    'tooltip-primary': color === 'primary',
    'tooltip-secondary': color === 'secondary',
    'tooltip-accent': color === 'accent',
    'tooltip-neutral': color === 'neutral',
    'tooltip-info': color === 'info',
    'tooltip-success': color === 'success',
    'tooltip-warning': color === 'warning',
    'tooltip-error': color === 'error',
  });
  return (
    <div className={cn(tooltipBaseClassName, className?.wrapper)}>
      <div
        className={cn(
          'tooltip-content',
          'max-w-60 sm:max-w-xs',
          className?.content
        )}
      >
        {content}
      </div>

      {children}
    </div>
  );
};

export default Tooltip;