import clsx from 'clsx';
import React from 'react';
import { twMerge } from 'tailwind-merge';

export type Props = React.HTMLAttributes<HTMLDivElement>;

const NotificationDot: React.FC<Props> = (props) => {
  const { children, ...restProps } = props;

  return (
    <div
      {...restProps}
      className={twMerge(
        clsx(
          'relative overflow-hidden rounded-full',
          'bg-accent-pink-on-primary text-background-primary',
          {
            'inline-block h-3 w-3': !children,
            'inline-flex items-center justify-center p-0.5': !!children,
            'min-w-5 font-sans text-xs font-bold': !!children,
          }
        ),
        props.className
      )}
    >
      {children}
    </div>
  );
};

export default NotificationDot;