import React from 'react'
import { Badge, Skeleton } from '@chakra-ui/react'

export interface UnreadBadgeProps {
  isLoading?: boolean
  unreadCount?: number
}

export const UnreadBadge: React.FC<UnreadBadgeProps> = ({ isLoading, unreadCount }) => {
  if (isLoading) {
    return (
      <Skeleton>
        <Badge px={1} borderRadius="full" pos="absolute" top="-8px" right="-8px">
          99
        </Badge>
      </Skeleton>
    )
  }

  if (!unreadCount) {
    return null
  }

  return (
    <Badge px={1} borderRadius="full" pos="absolute" top="-8px" right="-8px" bgColor="red.400" color="white">
      {unreadCount}
    </Badge>
  )
}