import React, { ReactNode } from 'react';
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@graphpolaris/shared/lib/components/tooltip';

export type VisualizationTooltipProps = {
  name: string;
  colorHeader: string;
  children: ReactNode;
};

export const VisualizationTooltip: React.FC<VisualizationTooltipProps> = ({ name, colorHeader, children }) => {
  return (
    <div className="border-1 border-sec-200 bg-white w-[12rem] -mx-2 -my-2">
      <div className="flex m-0 justify-start items-stretch border-b border-sec-200 relative">
        <div className="left-0 top-0 h-auto w-1.5" style={{ backgroundColor: colorHeader }}></div>
        <div className="px-2.5 py-1 truncate flex">
          <div className={'flex max-w-full'}>
            <span className="text-base font-semibold truncate">{name}</span>
          </div>
        </div>
      </div>
      {children}
    </div>
  );
};