import * as React from "react"
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"

interface TruncatedTextProps {
  text: string
  maxWords?: number
}

export function TruncatedText({ text, maxWords = 4 }: TruncatedTextProps) {
  const words = text.trim().split(/\s+/)
  console.log(words)
  const shouldTruncate = words.length > maxWords
  const displayText = shouldTruncate ? words.slice(0, maxWords).join(" ") + " ..." : text

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <span className={`${words.length >= 4 ? "cursor-help" : ""} text-foreground`}>
            {displayText}
          </span>
        </TooltipTrigger>
        {shouldTruncate && (
          <TooltipContent className="max-w-xs">
            {text}
          </TooltipContent>
        )}
      </Tooltip>
    </TooltipProvider>
  )
}