import { useSyncedAnimationStyle } from '@renderer/hooks/useSyncedAnimationStyle';
import { cn } from '@renderer/lib/utils';

const PULSE_DURATION_MS = 2000;

interface MemberPresenceDotProps {
  className?: string;
  label: string;
}

export const MemberPresenceDot = ({
  className,
  label,
}: MemberPresenceDotProps): React.JSX.Element => {
  const shouldSyncPulse = className?.includes('animate-pulse') === true;
  const syncedPulseStyle = useSyncedAnimationStyle(shouldSyncPulse, PULSE_DURATION_MS);

  return (
    <span
      className={cn(
        'absolute -bottom-0.5 -right-0.5 rounded-full border-2 border-[var(--color-surface)]',
        className
      )}
      style={syncedPulseStyle}
      aria-label={label}
    />
  );
};
