'use client'

import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { debugProps } from '@/lib/debug'

interface DemoTooltipProps {
  show: boolean
  children: React.ReactNode
}

// Wraps children with a "Niet beschikbaar in demo-modus" tooltip when show=true.
// Uses a span trigger so tooltip works on disabled elements.
export function DemoTooltip({ show, children }: DemoTooltipProps) {
  if (!show) return <span {...debugProps('demo-tooltip', 'DemoTooltip', 'shared/demo-tooltip.tsx')}>{children}</span>

  return (
    <span {...debugProps('demo-tooltip', 'DemoTooltip', 'shared/demo-tooltip.tsx')}>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger render={<span className="inline-flex" />}>
            {children}
          </TooltipTrigger>
          <TooltipContent>Niet beschikbaar in demo-modus</TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </span>
  )
}
