import React from 'react'
import { HelpCircle } from 'lucide-react'
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
import { getNodeHelp } from '@/lib/graph/nodeRegistry'
import { cn } from '@/lib/utils'

type Props = {
    nodeType: string
    className?: string
}

export function NodeHelpPopover({ nodeType, className }: Props) {
    const { title, content } = getNodeHelp(nodeType)

    return (
        <Popover>
            <PopoverTrigger
                asChild
                className={cn(
                    'shrink-0 rounded p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
                    className
                )}
                aria-label={`Help: ${title}`}
            >
                <button type="button">
                    <HelpCircle className="size-3.5" />
                </button>
            </PopoverTrigger>
            <PopoverContent side="top" align="end" className="w-80 max-h-[70vh] overflow-y-auto">
                <h3 className="text-sm font-semibold text-foreground">{title}</h3>
                <div className="mt-2">{content}</div>
            </PopoverContent>
        </Popover>
    )
}