import { Box } from '@radix-ui/themes';
import { Info, type LucideProps } from 'lucide-react';
import { Tooltip } from 'radix-ui';
import type { PropsWithChildren } from 'react';

export type InfoIconProps = PropsWithChildren<
  {
    tooltipContainerProps?: Omit<Tooltip.TooltipContentProps & React.RefAttributes<HTMLDivElement>, 'children'>;
  } & Omit<LucideProps, 'ref'> &
    React.RefAttributes<SVGSVGElement>
>;

export function InfoIcon({ tooltipContainerProps, children, ...iconProps }: InfoIconProps) {
  return (
    <Tooltip.Root>
      <Tooltip.Trigger asChild>
        <Info size={16} {...iconProps} />
      </Tooltip.Trigger>
      <Tooltip.Portal>
        <Tooltip.Content
          //
          side="top"
          align="center"
          sideOffset={5}
          alignOffset={0}
          avoidCollisions={true}
          style={{
            color: 'black',
            backgroundColor: 'white',
            fontSize: 12,
            boxShadow: '0 2px 10px rgba(0, 0, 0, 0.3)',
            border: '1px solid var(--gray-5)',
          }}
          {...tooltipContainerProps}
        >
          {children}
          <Tooltip.Arrow className="TooltipArrow" fill="white" />
        </Tooltip.Content>
      </Tooltip.Portal>
    </Tooltip.Root>
  );
}

export function TooltipContentContainer({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) {
  return (
    <Box
      style={{
        padding: '8px 12px',
        color: 'black',
        backgroundColor: 'white',
        borderRadius: 4,
        fontSize: 12,
      }}
      {...props}
    >
      {children}
    </Box>
  );
}