'use client';

import React, { ReactNode } from 'react';

type Props = {
  content: ReactNode;
  hidden?: boolean;
  position?: 'top' | 'bottom' | 'left' | 'right';
} & Omit<React.HTMLAttributes<HTMLElement>, 'id'>;

const positionClasses = {
  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
};

const arrowClasses = {
  top: 'top-full left-1/2 -translate-x-1/2 border-t-disabled',
  bottom: 'bottom-full left-1/2 -translate-x-1/2 border-b-disabled',
  left: 'left-full top-1/2 -translate-y-1/2 border-l-disabled',
  right: 'right-full top-1/2 -translate-y-1/2 border-r-disabled',
};

const Tooltip = ({
  children,
  content,
  hidden = false,
  position = 'top',
  ...rest
}: Props) => {

  return (
    <div className="relative flex items-center group w-full" {...rest}>
      {children}
      {!hidden && (
        <div
          className={`pointer-events-none absolute z-10 px-3 py-2 text-xs text-muted-foreground bg-muted rounded whitespace-nowrap transition-opacity duration-150 opacity-0 group-hover:opacity-100 ${positionClasses[position]}`}
        >
          {content}
          <div
            className={`absolute w-0 h-0 border-8 border-transparent ${arrowClasses[position]}`}
          />
        </div>
      )}
    </div>
  );
};

export default Tooltip;
