import React from 'react';
import { clsx } from 'clsx';

export type StatusVariant = 'success' | 'warning' | 'error' | 'info' | 'pending';

export interface StatusIndicatorProps {
  status: StatusVariant;
  label?: string;
  size?: 'sm' | 'md' | 'lg';
  showPulse?: boolean;
  className?: string;
}

const statusStyles = {
  success: 'bg-success',
  warning: 'bg-warning',
  error: 'bg-destructive',
  info: 'bg-primary',
  pending: 'bg-muted-foreground',
};

const sizeClasses = {
  sm: 'h-2 w-2',
  md: 'h-2.5 w-2.5',
  lg: 'h-3 w-3',
};

/**
 * Status indicator dot component
 */
export const StatusIndicator = ({
  status,
  label,
  size = 'md',
  showPulse = false,
  className,
}: StatusIndicatorProps) => {
  return (
    <div className={clsx('flex items-center gap-2', className)}>
      <div
        className={clsx('rounded-full', statusStyles[status], sizeClasses[size], {
          'animate-pulse': showPulse,
        })}
        aria-label={label || status}
        role="status"
      />
      {label && <span className="text-sm text-foreground capitalize">{label}</span>}
    </div>
  );
};