// frontend/src/components/NotificationDot.tsx

type NotificationDotProps = {
  title?: string
  label?: string
  className?: string
  pingClassName?: string
  dotClassName?: string
}

function classNames(...classes: Array<string | false | null | undefined>) {
  return classes.filter(Boolean).join(' ')
}

export default function NotificationDot({
  title = 'Neue Benachrichtigung',
  label = 'Neue Benachrichtigung',
  className,
  pingClassName,
  dotClassName,
}: NotificationDotProps) {
  return (
    <span
      title={title}
      aria-label={label}
      role="status"
      className={classNames('relative inline-flex size-2 shrink-0', className)}
    >
      <span
        aria-hidden="true"
        className={classNames(
          'absolute inline-flex h-full w-full animate-ping rounded-full bg-indigo-400 opacity-75',
          pingClassName,
        )}
      />
      <span
        aria-hidden="true"
        className={classNames(
          'relative inline-flex size-2 rounded-full bg-indigo-600 dark:bg-indigo-400',
          dotClassName,
        )}
      />
    </span>
  )
}