import { Button, Avatar } from 'index'
import * as HoverCardPrimitive from './index'
import { CalendarDays } from 'lucide-react'

export default () => (
  <HoverCardPrimitive.Root>
    <HoverCardPrimitive.Trigger asChild>
      <Button variant="link">@nextjs</Button>
    </HoverCardPrimitive.Trigger>
    <HoverCardPrimitive.Content tw="w-80">
      <div tw="flex justify-between space-x-4">
        <Avatar.Root>
          <Avatar.Image src="https://github.com/vercel.png" />
          <Avatar.Fallback>VC</Avatar.Fallback>
        </Avatar.Root>
        <div tw="space-y-1">
          <h4 tw="text-sm font-semibold">@nextjs</h4>
          <p tw="text-sm">
            The React Framework – created and maintained by @vercel.
          </p>
          <div tw="flex items-center pt-2">
            <CalendarDays tw="mr-2 h-4 w-4 opacity-70" />{' '}
            <span tw="text-xs text-slate-500 dark:text-slate-400">
              Joined December 2021
            </span>
          </div>
        </div>
      </div>
    </HoverCardPrimitive.Content>
  </HoverCardPrimitive.Root>
)
