---
import { Icon } from 'astro-icon/components'

import { cn } from '../lib/cn'
import { prisma } from '../lib/prisma'

import type { HTMLAttributes } from 'astro/types'

type Props = Omit<HTMLAttributes<'a'>, 'href'> & {
  count?: number | null
}

const { count: propsCount, class: className, ...htmlProps } = Astro.props

const user = Astro.locals.user

const count =
  propsCount ??
  (await Astro.locals.banners.try(
    'Error getting unread notification count',
    async () => (user ? await prisma.notification.count({ where: { userId: user.id, read: false } }) : 0),
    0
  ))
---

{
  user && (
    <a
      href="/notifications"
      class={cn(
        'group relative flex cursor-pointer items-center justify-center text-gray-400 transition-colors duration-100 hover:text-white',
        className
      )}
      aria-label={`Go to notifications${count > 0 ? ` (${count} unread)` : ''}`}
      {...htmlProps}
    >
      <Icon name="material-symbols:notifications-outline" class="size-5" />
      {count > 0 && (
        <span class="absolute top-[calc(50%-var(--spacing)*3.5)] right-[calc(50%-var(--spacing)*3.5)] flex size-3.5 items-center justify-center rounded-full bg-blue-600 text-[10px] font-bold tracking-tighter text-white group-hover:bg-blue-500">
          {count > 99 ? '★' : count.toLocaleString()}
        </span>
      )}
    </a>
  )
}
