import * as React from 'react'
import * as HoverCardPrimitive from '@radix-ui/react-hover-card'
import tw from 'twin.macro'

const HoverCard = HoverCardPrimitive.Root

const HoverCardTrigger = HoverCardPrimitive.Trigger

const HoverCardContent = React.forwardRef<
  React.ElementRef<typeof HoverCardPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ align = 'center', sideOffset = 4, ...props }, ref) => (
  <HoverCardPrimitive.Content
    ref={ref}
    align={align}
    sideOffset={sideOffset}
    css={tw`
      z-50
      w-64
      rounded-md
      border
      border-slate-100
      bg-white
      p-4
      shadow-md
      outline-none
      animate-in
      zoom-in-90
      dark:border-slate-800
      dark:bg-slate-800
    `}
    {...props}
  />
))
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName

const _HoverCard = HoverCard
export {
  _HoverCard as Root,
  HoverCardTrigger as Trigger,
  HoverCardContent as Content,
}
