@props({'trigger': '', 'align': 'center'})
<span data-slot="hover-card" class="group/hover-card relative inline-flex">
  {{ trigger }}
  <div data-slot="hover-card-content" {{ attributes.cn(
      "invisible absolute top-full z-50 mt-2 w-64 rounded-md border bg-popover p-4 text-popover-foreground opacity-0 shadow-md transition-[opacity,visibility] delay-200 duration-150 group-focus-within/hover-card:visible group-focus-within/hover-card:opacity-100 group-hover/hover-card:visible group-hover/hover-card:opacity-100",
      {'start': 'left-0', 'center': 'left-1/2 -translate-x-1/2', 'end': 'right-0'}[align],
  ) }}>{{ slot }}</div>
</span>