import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { cn } from '@/src/lib/utils';
import { FaSquarePlus } from 'react-icons/fa6';
import { AddComponentButtonProps } from '@/src/types/builder';

export function AddComponentButton({
  onClick,
  className,
  position = 'top',
  variant = 'hover',
  section = false,
}: AddComponentButtonProps) {
  return (
    <div
      className={cn(
        'z-[350]',
        variant === 'hover'
          ? 'absolute left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-opacity duration-200'
          : 'opacity-100',
        position === 'top' ? '-top-5' : '-bottom-5'
      )}
    >
      <TooltipProvider delayDuration={0}>
        <Tooltip>
          <TooltipTrigger asChild>
            <button
              className={cn('transition-colors rounded-lg text-[var(--color-text)]', className)}
              onClick={onClick}
            >
              <FaSquarePlus
                className={cn('w-10 h-10 bg-[var(--color-background)] rounded-lg', section ? 'w-6 h-6' : '')}
              />
            </button>
          </TooltipTrigger>
          <TooltipContent
            className='bg-[var(--color-text)] text-[var(--color-background)] px-3 py-1.5 text-sm rounded-md z-[450]'
            sideOffset={5}
          >
            <div className='flex items-center gap-2 w-full'>
              <div className='h-[1px] flex-1 bg-[var(--color-background)]'></div>
              Add section
              <div className='h-[1px] flex-1 bg-[var(--color-background)]'></div>
            </div>
          </TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>
  );
}
