import {Placement} from '@floating-ui/react'
import {ReactNode} from 'react'
import {formatTime} from 'web/lib/util/time'

import {Tooltip} from './tooltip'

export function DateTimeTooltip(props: {
  time: number
  text?: string
  className?: string
  children: ReactNode
  noTap?: boolean
  noFade?: boolean
  placement?: Placement
}) {
  const {time, text, ...rest} = props

  const formattedTime = formatTime(time)
  const toolTip = text ? `${text} ${formattedTime}` : formattedTime

  return <Tooltip text={toolTip} {...rest} suppressHydrationWarning />
}