import * as React from 'react';
import { cn } from '@/lib/helper';

export interface StatusBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: 'active' | 'pending' | 'inactive';
  children: React.ReactNode;
}

const StatusBadge = React.forwardRef<HTMLDivElement, StatusBadgeProps>(
  ({ className, variant = 'pending', children, ...props }, ref) => {
    const variants = {
      active: 'bg-green-100/50 text-gray-900',
      pending: 'bg-gray-100/80 text-gray-900',
      inactive: 'bg-red-100/50 text-gray-900',
    };

    const dotColors = {
      active: '#008000',
      pending: '#D9D9D9',
      inactive: '#FF3A3A',
    };

    return (
      <div
        ref={ref}
        className={cn(
          'inline-flex items-center gap-1 px-2 py-1 rounded-lg border border-black/5',
          variants[variant],
          className
        )}
        {...props}
      >
        <svg
          className='w-3 h-3'
          fill='none'
          preserveAspectRatio='none'
          viewBox='0 0 12 12'
        >
          <circle cx='6' cy='6' r='6' fill={dotColors[variant]} />
        </svg>
        <span className='text-xs font-medium leading-6'>{children}</span>
      </div>
    );
  }
);

StatusBadge.displayName = 'StatusBadge';

export { StatusBadge };
