import React from 'react';
import { Box } from './Box';

interface StatusDotProps {
  color?: string;
  pulse?: boolean;
  size?: number;
  className?: string;
}

/**
 * StatusDot
 * 
 * A simple status indicator dot with optional pulse effect.
 */
export function StatusDot({ 
  color = '#4ED4E0', 
  pulse = false, 
  size = 2,
  className = '' 
}: StatusDotProps) {
  const sizeClass = `w-${size} h-${size}`;
  
  return (
    <Box position="relative" className={`${sizeClass} ${className}`}>
      <Box 
        w="full" 
        h="full" 
        rounded="full" 
        style={{ backgroundColor: color }} 
      />
      {pulse && (
        <Box 
          position="absolute" 
          inset={0} 
          rounded="full" 
          className="animate-ping" 
          style={{ backgroundColor: color, opacity: 0.75 }} 
        />
      )}
    </Box>
  );
}